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]="[&#39;/next&#39;,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

Get Parameterメソッド: ActivatedRoute.params[id]

上記のHTMLコードの最初のroutelinkは

さらに、ルーティングを設定する必要があります

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

を読んでメソッドをマスターしたと思います。この記事の事例については、PHP 中国語 Web サイトを参照してください。その他の関連記事もお勧めします。

JS を操作して透明度のグラデーション アニメーションを実装する方法

XML ノードと属性を走査する

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