web-dev-qa-db-ja.com

Angularの方法でAngular2ルートのパラメーターを取得する方法は？

ルート

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

上記のリンク例でStringbdoを取得したい。

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

任意の助けをいただければ幸いです。ありがとう

angularangular2-routing
57
devhermluna

コンポーネントに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つの違いを含むドキュメントの場合 このリンクをチェックアウト および「activatedroute」を検索

更新：2017年8月

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

131
BeetleJuice

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パラメータを取得できるためです。また、関連するエンティティ間を移動すると、サブスクリプションが適切に更新されます。

Angular Docsのソース

16
KMJungersen