1. ホーム
  2. angular

[解決済み] Angular2ルートでAngularの方法でパラメータを取得するには?

2022-10-10 13:28:30

質問

ルート

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を使用して配列に分割することによってリンクを取得することができることを認識しています。だから、私は最後のパラメータを取得することができますが、私はこれを行う上で適切な方法があるかどうかを知りたいですangular方法。

どんな助けでも感謝します。ありがとうございます。

どのように解決するのですか?

更新日:2019年9月

何人かの方がおっしゃっているように、パラメータにある paramMap のパラメータは、共通の Map API を使用します。

パラメータが変更されても気にしない場合、パラメータのスナップショットを取得する。

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

パラメータ値の変更(通常はルータのナビゲーションの結果)を購読し、警告を受けるには

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

更新日:2017年8月

Angular4から。 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'];
        )
    }

両者の違いを含むドキュメントについては このリンクをチェックしてください をクリックし、" を検索してください。 アクティベート・ルート と入力します。