web-dev-qa-db-ja.com

Angular 6では、大文字と小文字を区別しないURLパターンをどのように作成しますか？

私の場合、大文字と小文字を区別しない方法で同じURLをサポートしたいと思います。

例：すべてのURLをサポートする必要があります

localhost:1029/documentation
localhost:1029/DOCUMENTATION
localhost:1029/DOCUMENTAtion
localhost:1029/docuMENTATION
angularangular5angular6
11
Jitendra

このprovideステートメントを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]
})
13
mittal bhatt

次のように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
}
]
3
foram kantaria

これは機能し、以下のようなワイルド文字を使用して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（）の条件が無限にルーティングまたはナビゲートしないことを確認する場合

0
Ganesh