詳解Angular5 路由傳參的3種方法
本文介紹了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://chabaoo.cn/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)文章
angularjs實(shí)現(xiàn)Tab欄切換效果
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)Tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
下面小編就為大家?guī)硪黄獪\談angular懶加載的一些坑。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
AngularJS動態(tài)綁定ng-options的ng-model實(shí)例代碼
本篇文章主要介紹了AngularJS動態(tài)綁定ng-options的ng-model實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Angular7中創(chuàng)建組件/自定義指令/管道的方法實(shí)例詳解
這篇文章主要介紹了在angular7中創(chuàng)建組件/自定義指令/管道的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
AngulerJS學(xué)習(xí)之按需動態(tài)加載文件
本篇文章主要介紹了AngulerJS學(xué)習(xí)之按需動態(tài)加載文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本篇文章主要介紹了詳解Angular2組件之間如何通信，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
AngularJS操作鍵值對象類似java的hashmap(填坑小結(jié))
我們知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法，那么在angularJS中如何創(chuàng)造（使用）這樣一個對象呢？今天小編通過本文給大家分享下，感興趣的朋友一起學(xué)習(xí)吧2016-11-11
AngularJS自定義插件實(shí)現(xiàn)網(wǎng)站用戶引導(dǎo)功能示例
這篇文章主要介紹了AngularJS自定義插件實(shí)現(xiàn)網(wǎng)站用戶引導(dǎo)功能,結(jié)合實(shí)例形式分析了AngularJS自定義插件的實(shí)現(xiàn)步驟與相關(guān)功能技巧,需要的朋友可以參考下2016-11-11
Angular?Component屬性綁定target和attr.target的區(qū)別分析
這篇文章主要介紹了Angular?Component屬性綁定target和attr.target的區(qū)別分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
AngularJS解決ng界面長表達(dá)式(ui-set)的方法分析
這篇文章主要介紹了AngularJS解決ng界面長表達(dá)式(ui-set)的方法,通過具體問題的分析并結(jié)合實(shí)例形式給出了AngularJS長表達(dá)式的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11