快捷導(dǎo)航

詳解Angular5路由傳值方式及其相關(guān)問題

更新時(shí)間：2018年04月28日 14:03:41 作者：一葉知秋

這篇文章主要介紹了詳解Angular5路由傳值方式及其相關(guān)問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

目前Angular已經(jīng)升級(jí)到了穩(wěn)定版本Angular5,這次升級(jí)更小更快以及更穩(wěn)定!路由可以說是Angular甚至是單頁應(yīng)用的核心部分了吧!在angularjs中的路由最大的缺點(diǎn)就是無法嵌套路由,在Angular中解決了這個(gè)問題!在Angular中路由不僅僅是頁面跳轉(zhuǎn),其中還有一項(xiàng)叫英雄列表跳轉(zhuǎn)英雄詳情!在諸多的列表,不可能給每個(gè)英雄做一個(gè)詳情頁,于是乎路由參數(shù)起到作用了!通過路由傳入?yún)?shù)識(shí)別那個(gè)英雄的詳情!

現(xiàn)在對(duì)于路由傳值進(jìn)行詳解,首先一種方式是官網(wǎng)的導(dǎo)航到詳情的單值id傳入,另一種是多數(shù)據(jù)傳入!

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>

以上是官網(wǎng)示例

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

首先是列表頁,以及跳轉(zhuǎn)方式

復(fù)制代碼代碼如下:

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

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

{
  path:'listDetail/:id',
  component:ListDetailComponent
 },

傳入后就是取到參數(shù),在詳情組件的ngOnInit生命周期獲取參數(shù)

 ngOnInit() {
  this.route.params
   .subscribe((params: Params) => {
    this.id = params['id'];
    console.log(this.id);
    console.log('傳值');
    console.log(params)
   })
 }

2.我們?cè)谄綍r(shí)的復(fù)雜的業(yè)務(wù)場(chǎng)景我們需要傳多個(gè)數(shù)據(jù),這時(shí)候該怎么辦呢?這時(shí)候我們就用到了queryParams

復(fù)制代碼代碼如下:

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

這里數(shù)據(jù)我是直接拿上去的,同樣你可以組織好數(shù)據(jù),一個(gè)參數(shù)放上去,簡(jiǎn)化html結(jié)構(gòu),現(xiàn)在有個(gè)問題,這樣多值傳入路由參數(shù)怎么配置呢?/:id/:id???我這個(gè)參數(shù)多少也不是固定的咋辦?其實(shí)這種方式不需要配置路由!你只需要傳入和取到數(shù)據(jù)就可以了!

 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);

   })
 }

以上就是Angular路由傳值兩種方式!希望對(duì)大家有幫助!也希望大家多多支持腳本之家。

您可能感興趣的文章: