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