Angular2ルートのパラメータをAngularで取得するにはどうすればよいですか？

Question 1

ルート

const appRoutes: Routes = [
    { path: '', redirectTo: '/companies/unionbank', pathMatch: 'full'},
    { path: 'companies/:bank', component: BanksComponent },
    { path: '**', redirectTo: '/companies/unionbank' }
]

成分

const NAVBAR = [
    { 
        name: 'Banks',
        submenu: [
            { routelink: '/companies/unionbank', name: 'Union Bank' },
            { routelink: '/companies/metrobank', name: 'Metro Bank' },
            { routelink: '/companies/bdo', name: 'BDO' },
            { routelink: '/companies/chinabank', name: 'China Bank' },
        ]
    },
    ...
]

リンクの例： http://localhost:8099/#/companies/bdo

上記のリンク例でString bdoを取得したいと思います。

window.location.hrefを使用してリンクを取得し、配列に分割できることを認識しています。だから、私は最後のパラメータを取得することができますが、これを角度のある方法で行うための適切な方法があるかどうかを知りたいです。

どんな助けでもいただければ幸いです。ありがとう

Question 2

更新：2019年9月

数人が言及したように、のパラメータにparamMapは共通のMapAPIを使用してアクセスする必要があります。

パラメータのスナップショットを取得するには、パラメータが変更される可能性があることを気にしない場合：

this.bankName = this.route.snapshot.paramMap.get('bank');

サブスクライブし、パラメーター値の変更についてアラートを受け取る（通常はルーターのナビゲーションの結果として）

this.route.paramMap.subscribe( paramMap => {
    this.bankName = paramMap.get('bank');
})

更新：2017年8月

Angular 4以降params、新しいインターフェースを優先して非推奨になりましたparamMap。上記の問題のコードは、単に一方を他方に置き換えるだけで機能するはずです。

元の回答

ActivatedRouteコンポーネントに注入すると、ルートパラメータを抽出できるようになります

    import {ActivatedRoute} from '@angular/router';
    ...
    
    constructor(private route:ActivatedRoute){}
    bankName:string;
    
    ngOnInit(){
        // 'bank' is the name of the route parameter
        this.bankName = this.route.snapshot.params['bank'];
    }

ユーザーが最初に別のコンポーネントに移動せずに、銀行から銀行に直接移動することを期待する場合は、オブザーバブルを介してパラメーターにアクセスする必要があります。

    ngOnInit(){
        this.route.params.subscribe( params =>
            this.bankName = params['bank'];
        )
    }

2つの違いを含むドキュメントについては、このリンクをチェックして「activateroute」を検索してください。

Question 3

Angular 6+以降、これは以前のバージョンとは少し異なる方法で処理されます。@BeetleJuiceが上記の回答で言及しているように、paramMapルートパラメータを取得するための新しいインターフェイスですが、Angularの最近のバージョンでは実行が少し異なります。これがコンポーネントにあると仮定します。

private _entityId: number;

constructor(private _route: ActivatedRoute) {
    // ...
}

ngOnInit() {
    // For a static snapshot of the route...
    this._entityId = this._route.snapshot.paramMap.get('id');

    // For subscribing to the observable paramMap...
    this._route.paramMap.pipe(
        switchMap((params: ParamMap) => this._entityId = params.get('id'))
    );

    // Or as an alternative, with slightly different execution...
    this._route.paramMap.subscribe((params: ParamMap) =>  {
        this._entityId = params.get('id');
    });
}

直接ページをロードするとIDパラメータを取得でき、関連するエンティティ間を移動するとサブスクリプションが適切に更新されるため、両方を使用することをお勧めします。

AngularDocsのソース