在Angular 6中如何使大小写不敏感的网址格式?

时间:2018-08-23 12:36:12

标签: angular angular5 angular6

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

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

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

3 个答案:

答案 0 :(得分:8)

您应将此提供语句添加到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]
})

答案 1 :(得分: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
}
]

答案 2 :(得分:0)

这将起作用,使用如下所示的通配符配置到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()中的条件确保它不会无限地路由或导航