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>

以上是官網示例

下面我們用我自己的示例介紹一下:

首先是列表頁,以及跳轉方式

代碼如下:

<p *ngFor="let item of items" [routerLink]="['/listDetail',item.id]">{{item.name}}</p>

然后是配置路由:(單值傳入的方式需要在詳情組件路由配置)

{
 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

代碼如下:

<p *ngFor="let data of datas" [routerLink]="['/listDetails']" [queryParams]="{id:data.id,state:data.state}">{{data.name}}</p>

這里數據我是直接拿上去的,同樣你可以組織好數據,一個參數放上去,簡化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);
 })
 }

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

vscode里使用.vue步驟詳解

jQuery遍歷XML節點與屬性實現步驟

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com