[解決済み] 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'];
)
}
両者の違いを含むドキュメントについては このリンクをチェックしてください をクリックし、" を検索してください。 アクティベート・ルート と入力します。
関連
-
[解決済み] 現在のルートを取得する方法
-
[解決済み] Angularでは、アクティブなルートをどのように決定するのですか?
-
[解決済み】Angular 2 ルート変更時に上部にスクロールさせる
-
[解決済み】Angular 2のオプションルートパラメーター
-
[解決済み】Angularでルート変更を検出する方法は?
-
[解決済み] [Solved] Angular 2 - this.router.parent.navigate('/about')を使用して別のルートに移動するにはどうすればよいですか?
-
[解決済み] ng buildの後にangular-cliのdist-folderのパスを変更するには?
-
[解決済み] パイプ ' ' が見つかりません。
-
[解決済み] Reactive Forms - フィールドをタッチしたものとしてマークする
-
[解決済み] FormGroupとFormArrayの使い分けは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ng serve がファイルの変更を自動的に検出しない
-
[解決済み] Angular 4/5/6 グローバル変数
-
[解決済み] パイプ ' ' が見つかりません。
-
[解決済み] angular-cliのビルドでカスタムファイルをインクルードするには?
-
[解決済み] trackBy` と `ngFor` の使い方
-
[解決済み] angular4 / typescriptでdocument.getElementByIdの置き換え?
-
[解決済み] タイプスクリプト タイプ X はタイプ Y の length、pop、push、concat、その他 26 のプロパティが欠落しています。[2740]
-
[解決済み] Angular / Angular Materialでmat-horizontal-stepperのステップをプログラムで移動させることは可能ですか?
-
[解決済み] Reactive Forms - フィールドをタッチしたものとしてマークする
-
[解決済み] angular-cli server - APIリクエストを別のサーバーにプロキシする方法は?