這次帶給大家如何使用Angular5路由傳值，使用Angular5路由傳值的注意事項有哪些，以下是實戰案例，一起來看一下。
目前Angular已經升級到了穩定版本Angular5,這次升級更小更快以及更穩定!路由可以說是Angular甚至是單頁應用的核心部分了吧!在angularjs#中的路由最大的缺點就是無法嵌套路由,在Angular中解決了這個問題!在Angular中路由不僅僅是頁面跳轉,其中還有一項叫英雄列表跳轉英雄詳情!在諸多的列表,不可能給每個英雄做一個詳情頁,於是乎路由參數起到作用了!通過路由傳入參數識別那個英雄的詳情!
現在對於路由傳值進行詳解,首先一種方式是官網的導航到詳情的單值id傳入,另一種是多資料傳入!
#1.單值傳入
['/hero', hero.id]
<ul class="items">
<li *ngFor="let hero of heroes$ | async"
[class.selected]="hero.id === selectedId">
<a [routerLink]="['/hero', hero.id]">
<span class="badge">{{ hero.id }}</span>{{ hero.name }}
</a>
</li>
</ul>以上是官網範例
下面我們用我自己的範例介紹一下:
首先是列表頁,以及跳轉方式
複製程式碼 程式碼如下：
{{item.name}}
然後是設定路由:(單值傳入的方式需要在詳情組件路由配置)
{
path:'listDetail/:id',
component:ListDetailComponent
},傳入後就是取到參數,在詳情組件的ngOnInit生命週期取得參數
ngOnInit() {
this.route.params
.subscribe((params: Params) => {
this.id = params['id'];
console.log(this.id);
console.log('传值');
console.log(params)
})
}2.我們在平常的複雜的業務場景我們需要傳多個資料,這時候該怎麼辦呢?這時候我們就用到了queryParams
複製程式碼 程式碼如下:
{{data.name}}
這裡資料我是直接拿上去的,同樣你可以組織好資料,一個參數放上去,簡化html結構,現在有個問題,這樣多值傳入路由參數怎麼配置呢?/:id/:id???我這個參數多少也不是固定的咋辦?其實這種方式不需要配置路由!你只需要傳入和取到數據就可以了!
ngOnInit() {
this.route.queryParams
.subscribe((params: Params) => {
this.id = params['id'];
this.state = params['state'];
console.log(params)
console.log(this.id);
console.log(this.state);
})
}相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是如何使用Angular5路由傳值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
