☰

Angular2ルートのパラメータをAngularの方法で取得するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript angular angular2-routing
Angular2ルートのパラメータをAngularの方法で取得するにはどうすればいいですか? 質問する

ルート

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' },
    ],
  },
  ...
];

例のURL:http://localhost:8099/#/companies/bdo

私は手に入れたいString bdo上記のサンプル URL では、

window.location.href を使用して URL を取得し、配列に分割できることはわかっています。その方法で、上記の URL の最後のパラメータを取得できます。ただし、Angular でこれを行う適切な方法があるかどうかを知りたいと思いました。

ご協力いただければ幸いです。ありがとうございます

ベストアンサー1

更新: 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'];
    }

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

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

ドキュメントについては、2つの違いを含めてこのリンクをチェックしてください「アクティブルート「

おすすめ記事