Angular5 ルーティング パラメーターの使用方法の詳細な説明

今回は、Angular5のルーティングパラメータの使い方と、Angular5のルーティングを使用する際の注意点について詳しく説明します。実際のケースを見てみましょう。

1. 疑問符の後のパラメータ、パラメータの取得方法: ActivatedRoute.queryParams[id]

例: /product?id=1&name=iphone または次のようになります: [ routerLink]= "[ '/books'] " [ queryParams] = " {bookname:'《《生》'}

コード: html

<h4>Messages</h4>
<p>Total:{{msgs.total}}</p>
<p *ngFor="let item of msgs.data">
 <b>{{item.name}}</b>:
 <a [routerLink]="['/next',item.id]" [queryParams]="{id:item.id, msg:item.msg, name:item.name}">{{item.msg}}</a>
 <a routerLink="/final">Reply</a><p></p>
</p>

パラメータ js

ngOnInit() {
 let obj = this.route.queryParams["_value"];
 console.log(obj);
}

2を取得します。コロン形式、

例: path:/ product/:id

パラメータの取得方法: ActivatedRoute.params[id]

上記のHTMLコードの最初のルートリンクは

さらに、ルートを設定する必要があります

{
 path:'listDetail/:id',
 component:ListDetailComponent
 }

http://www. jb51.net/article/139125.htm

3 .js でのパスジャンプ

例: path:/product,component:ProductComponent,data:[{madeInChina:true}]}

パラメータの取得方法: ActivatedRoute。 snapshot.data[0][madeInChina]

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

JSで透明度グラデーション関数を実装

vscodeで.vueを使う手順を詳しく解説

以上がAngular5 ルーティング パラメーターの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。