在 Angular 6 中如何使 url 模式不区分大小写？

Question

就我而言，我想以不区分大小写的方式支持相同的网址。

示例：它应该支持所有网址

localhost:1029/documentation
localhost:1029/DOCUMENTATION
localhost:1029/DOCUMENTAtion
localhost:1029/docuMENTATION

Answer 1

您应该将此提供语句添加到app.module.ts

import { DefaultUrlSerializer, UrlTree } from '@angular/router';

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    parse(url: string): UrlTree {
        // Optional Step: Do some stuff with the url if needed.

        // If you lower it in the optional step 
        // you don't need to use "toLowerCase" 
        // when you pass it down to the next function
        return super.parse(url.toLowerCase()); 
    }
}

还有

@NgModule({
    imports: [
      ...
    ],
    declarations: [AppComponent],
    providers: [
        {
            provide: UrlSerializer,
            useClass: LowerCaseUrlSerializer
        }
    ],
    bootstrap: [AppComponent]
})

Answer 2

您需要一个 UrlSerializer，如下所示：

import { DefaultUrlSerializer, UrlTree } from '@angular/router';


 export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
   parse(url: string): UrlTree {
      return super.parse(url.toLowerCase());
  }
}

然后将其添加为 app.module.ts 中的提供者

providers: [
 {
   provide: UrlSerializer,
   useClass: LowerCaseUrlSerializer
}
]

Answer 3

受此线程的启发，以下变体应该仅将 URL 部分中的 UrlSegments 小写 - 并保留查询参数。

这个想法是让 DefaultUrlSerializer 将 URL 解析为 UrlTree - 然后遍历 UrlTree 和小写段。

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    parse(url: string): UrlTree {
        const urlTree = super.parse(url);

        this.lowerCaseSegments(urlTree.root);

        return urlTree;
    }
    private lowerCaseSegments(urlSegmentGroup: UrlSegmentGroup) {
        if (urlSegmentGroup.hasChildren()) {
            Object.entries(urlSegmentGroup.children).forEach(
                ([key, value]) => this.lowerCaseSegments(value)
            );
        }

        urlSegmentGroup.segments.forEach((segment) => segment.path = segment.path.toLowerCase());
    }
}

Answer 4

这将起作用，使用通配符配置到 NotFoundComponent 的路由，如下所示

{path:'**',component:NotFoundComponent}

那么， 在 NotFoundComponent.ts 文件中，在 ngOnInit() 中添加以下行

if(this.route.snapshot.url[0].path.toLowerCase()!==this.route.snapshot.url[0].path)
      this.router.navigate([this.route.snapshot.url[0].path.toLowerCase()]);

您必须从“@ angular / router”导入ActivatedRoute，Router并注入构造函数，如下所示

constructor(private route:ActivatedRoute,
    private router:Router) { }

这里 ngOnInit() 中的 if 条件确保它不会无限路由或导航

Answer 5

import { DefaultUrlSerializer, UrlTree } from '@angular/router';
import { pascalize } from 'humps';

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    override parse(url: string): UrlTree {
        var urlArray = url.split('/');
        urlArray[urlArray.length - 1] = pascalize(urlArray[urlArray.length - 1]);

        var newUrl = urlArray.join('/');
        return super.parse(newUrl);
    }
}

我这样做是因为我的路线是 PascalCased。只要您有可预测的 url，可以轻松找到您的路线名称，此策略就会起作用。

这需要

http://localhost:4200/#/someId/someRoute 并做到 http://localhost:4200/#/someId/SomeRoute