詳解Angular5 路由傳參的3種方法
更新時間：2018年04月28日 14:00:26 作者：李嘉威
這篇文章主要介紹了詳解Angular5 路由傳參的3種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了Angular5 路由傳參，一共3種方法。分享給大家，具體如下：
1.問號后面帶的參數(shù)，獲取參數(shù)的方式：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>
獲取參數(shù)js
ngOnInit() {
let obj = this.route.queryParams["_value"];
console.log(obj);
}
2.冒號形式，
例如：path:/product/:id
獲取參數(shù)的方式：ActivatedRoute.params[id]
上邊html代碼中第一個routelink就是。
另外需配置路由
{
path:'listDetail/:id',
component:ListDetailComponent
}
參考http://m.fzitv.net/article/139125.htm
3.js里的路徑跳轉(zhuǎn)
例如：path:/product,component:ProductComponent,data:[{madeInChina:true}]}
獲取參數(shù)的方式： ActivatedRoute.snapshot.data[0][madeInChina]
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Angular.js中定時器循環(huán)的3種方法總結(jié)
這篇文章主要給大家總結(jié)了angular.js中定時器循環(huán)的3種方法，分別是利用$interlval實現(xiàn)、$timeout的遞歸調(diào)用來實現(xiàn)以及$timeout借助arguments.callee來實現(xiàn)，每種方法都給出了詳細(xì)的示例艾瑪供大家學(xué)習(xí)參考，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-04-04
這篇文章主要介紹了使用Angular.js制作一個簡單的RSS閱讀器的教程,AngularJS是一個非常有人氣的JavaScript庫,文中介紹的制作方法主要使用到了FreedReadR模版,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了angular分頁指令操作的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
基于Angularjs+mybatis實現(xiàn)二級評論系統(tǒng)(仿簡書)
這篇文章主要為大家詳細(xì)介紹了基于Angularjs+mybatis實現(xiàn)二級評論系統(tǒng)，模仿簡書效果制作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
angularjs2中父子組件的數(shù)據(jù)傳遞的實例代碼
本篇文章主要介紹了angularjs2中父子組件的數(shù)據(jù)傳遞的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
本文將介紹Angular子路由的用法，對此感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了angularJS 中$scope方法使用指南,需要的朋友可以參考下2015-02-02
本文給大家分享Angularjs cookie 操作實例詳解，demo案例分析，感興趣的朋友參考下吧2017-09-09
AngularJS中如何使用$http對MongoLab數(shù)據(jù)表進(jìn)行增刪改查
這篇文章主要介紹了AngularJS中如何使用$http對MongoLab數(shù)據(jù)表進(jìn)行增刪改查的相關(guān)資料,需要的朋友可以參考下2016-01-01
angular4響應(yīng)式表單與校驗實現(xiàn)demo
這篇文章主要介紹了angular4響應(yīng)式表單與校驗實現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05