角2はURLエンコードを無効にします

Question

URLエンコードを無効にしたいと思います。

私はこれを以下に使用します。

this.router.navigate(['/profile', { tags: 'one,two' }]); 

urlがこの

http://localhost:4200/profile;tags=one%2Ctwo 

のようなものです私はそれはかなりURLエンコードを無効にする方法はあり

http://localhost:4200/profile;tags=one,two 

以下のようになりたいですか？

Answer 1

Angular2はデフォルトでencodeURIComponent（）を使用してURLにqueryParamsをエンコードしますが、カスタムURLシリアライザを作成して既定の機能をオーバーライドすることで回避できます。

私の場合、カンマ（、）を（％2）に置き換えないように、Angular2は避けたかったのです。私はlang = en-us、en-ukとしてQueryを渡していましたが、lang = en-us％2en-ukに変換されていました。私はそれを働いた方法をここで

：あなたのメインappModule.ts

import {UrlSerializer} from '@angular/router'; 
import {CustomUrlSerializer} from './CustomUrlSerializer'; 

@NgModule({ 
    providers: [{ provide: UrlSerializer, useClass: CustomUrlSerializer }] 
}) 

これはあなたのデフォルトを壊さないことに線の下に追加

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

export class CustomUrlSerializer implements UrlSerializer { 
    parse(url: any): UrlTree { 
     let dus = new DefaultUrlSerializer(); 
     return dus.parse(url); 
    } 

    serialize(tree: UrlTree): any { 
     let dus = new DefaultUrlSerializer(), 
      path = dus.serialize(tree); 
     // use your regex to replace as per your requirement. 
     return path.replace(/%2/g,','); 
    } 
} 

CustomUrlSerializer.ts機能性を備え、必要に応じてURLを管理します。

Answer 2

URLは次のようになります。

http://localhost:4200/profile;tags=one%2Ctwo 

しかし、あなたはそれを消費するとき、それは問題をもたらすことはありません。あなたは、「プロファイル」経路について、次のようなコードで「canActive」ガード設定した場合：

canActivate(route: ActivatedRouteSnapshot) { 
    console.log(route.params);} 

そして、あなたはhttp://localhost:4200/profile;tags=one%2Ctwoに移動し、コンソールで{tag: one, two}が表示されます。あなたがそれを消費するとき、それは「1つ、2つ」です。もちろん、このコード化されたURLをコピーして、他の人に送信して使用することもできます。