Angular路由——在路由時候傳遞資料

starof發表於2018-05-08
Angular路由

有3種方式

1、在查詢引數中傳遞資料

2、在路由路徑中傳遞資料

定義路由路徑時就要指定引數名字，在實際路徑中攜帶引數。

3、在路由配置中傳遞資料

一、在查詢引數中傳遞資料

第一步：修改模版中商品詳情連結，帶一個指令queryParams

<a [routerLink]="['/product']" [queryParams]="{id:1}">商品詳情</a>

效果：點選連結會傳一個商品id為1的引數過去。

第二步：在商品詳情元件中接收引數

用ActivatedRoute接收id並賦值給productId顯示在模版中。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private productId: number;
  constructor(private routeInfo: ActivatedRoute) { }

  ngOnInit() {
    this.productId = this.routeInfo.snapshot.queryParams["id"];
  }

}

修改模版顯示

<p>
  這裡是商品資訊元件
</p>
<p>
  商品id是{{productId}}
</p>

 

二、 在路由路徑中傳遞資料

第一步：修改路由path屬性使其可以攜帶資料

{ path: 'product/:id', component: ProductComponent },

第二步：修改路由連結的引數來傳遞資料

傳一個2過去。

<a [routerLink]="['/product',2]">商品詳情</a>

效果：

第三步，商品詳情資訊元件，從url中取id

this.productId = this.routeInfo.snapshot.params["id"];

三、引數快照和引數訂閱

1、引數快照問題

引數快照就是從snapshot中獲取引數。

this.productId = this.routeInfo.snapshot.params["id"];

修改：

商品詳情按鈕的響應函式，傳遞一個3過去。

toProductDetails(){
    this.router.navigate(['/product',3]);
  }

問題：

先點主頁，再點商品詳情連結正確跳轉到商品詳情元件，再點商品詳情按鈕，問題來來，url中id變為來3，內容顯示中id沒有變還是2。

原因：

從home元件路由到component元件，商品詳情元件會被建立，它的constructor(),ngOnInit()會被呼叫一次。

但是從商品詳情元件直接路由到商品詳情，由於商品詳情元件在點選商品詳情按鈕時已經被建立了，它不會再次被建立，ngOnInit()方法不會再次被建立。所以productId依然儲存著第一次被建立時候的值。

解決辦法：引數訂閱。 

2、引數訂閱 

rxjs的subscribe方法。

  ngOnInit() {
    this.routeInfo.params.subscribe((params: Params)=> this.productId=params["id"]);
  }

問題得以解決。

 

獲取路由引數時候：

確定一個元件不會從自身路由到自身，可以通過引數快照方式獲取引數。

不確定，則用引數訂閱方式獲取。

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/9006185.html 有問題歡迎與我討論，共同進步。

相關文章