詳解Angular5 路由傳參的3種方法
更新時間：2018年04月28日 14:00:26 作者：李嘉威
這篇文章主要介紹了詳解Angular5 路由傳參的3種方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了Angular5 路由傳參，一共3種方法。分享給大家，具體如下：
1.問號后面帶的參數，獲取參數的方式：ActivatedRoute.queryParams[id]
例如：/product?id=1&name=iphone還可以是： [ routerLink]= "['/books']" [ queryParams]= "{bookname:'《活著》'}
代碼：html
<h4>Messages</h4>
<p>Total:{{msgs.total}}</p>
<div *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>
</div>
獲取參數js
ngOnInit() {
let obj = this.route.queryParams["_value"];
console.log(obj);
}
2.冒號形式，
例如：path:/product/:id
獲取參數的方式：ActivatedRoute.params[id]
上邊html代碼中第一個routelink就是。
另外需配置路由
{
path:'listDetail/:id',
component:ListDetailComponent
}
參考http://www.dbjr.com.cn/article/139125.htm
3.js里的路徑跳轉
例如：path:/product,component:ProductComponent,data:[{madeInChina:true}]}
獲取參數的方式： ActivatedRoute.snapshot.data[0][madeInChina]
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了angularjs實現Tab欄切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
下面小編就為大家?guī)硪黄獪\談angular懶加載的一些坑。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
AngularJS動態(tài)綁定ng-options的ng-model實例代碼
本篇文章主要介紹了AngularJS動態(tài)綁定ng-options的ng-model實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Angular7中創(chuàng)建組件/自定義指令/管道的方法實例詳解
這篇文章主要介紹了在angular7中創(chuàng)建組件/自定義指令/管道的相關知識，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
本篇文章主要介紹了AngulerJS學習之按需動態(tài)加載文件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本篇文章主要介紹了詳解Angular2組件之間如何通信，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
AngularJS操作鍵值對象類似java的hashmap(填坑小結)
我們知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法，那么在angularJS中如何創(chuàng)造（使用）這樣一個對象呢？今天小編通過本文給大家分享下，感興趣的朋友一起學習吧2016-11-11
這篇文章主要介紹了AngularJS自定義插件實現網站用戶引導功能,結合實例形式分析了AngularJS自定義插件的實現步驟與相關功能技巧,需要的朋友可以參考下2016-11-11
Angular?Component屬性綁定target和attr.target的區(qū)別分析
這篇文章主要介紹了Angular?Component屬性綁定target和attr.target的區(qū)別分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
AngularJS解決ng界面長表達式(ui-set)的方法分析
這篇文章主要介紹了AngularJS解決ng界面長表達式(ui-set)的方法,通過具體問題的分析并結合實例形式給出了AngularJS長表達式的相關使用技巧,需要的朋友可以參考下2016-11-11