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

      })
  }

以上就是Angular路由傳值兩種方式!但願對你們有幫助!能夠幫到你們的話,你們幫我點個星吧點個關注吧!剛入駐這個博客不是好久!嘿嘿嘿.