有3種方式

1、在查詢參數(shù)中傳遞數(shù)據(jù)

2、在路由路徑中傳遞數(shù)據(jù)

定義路由路徑時(shí)就要指定參數(shù)名字，在實(shí)際路徑中攜帶參數(shù)。

3、在路由配置中傳遞數(shù)據(jù)

一、在查詢參數(shù)中傳遞數(shù)據(jù)

第一步：修改模版中商品詳情鏈接，帶一個(gè)指令queryParams

商品詳情

效果：點(diǎn)擊鏈接會(huì)傳一個(gè)商品id為1的參數(shù)過去。

第二步：在商品詳情組件中接收參數(shù)

用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']

})

exportclass ProductComponent implementsOnInit {privateproductId: number;

constructor(privaterouteInfo: ActivatedRoute) { }

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

}

}

修改模版顯示

這里是商品信息組件

商品id是{{productId}}

二、?在路由路徑中傳遞數(shù)據(jù)

第一步：修改路由path屬性使其可以攜帶數(shù)據(jù)

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

第二步：修改路由鏈接的參數(shù)來傳遞數(shù)據(jù)

傳一個(gè)2過去。

商品詳情

效果：

第三步，商品詳情信息組件，從url中取id

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

三、參數(shù)快照和參數(shù)訂閱

1、參數(shù)快照問題

參數(shù)快照就是從snapshot中獲取參數(shù)。

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

修改：

商品詳情按鈕的響應(yīng)函數(shù)，傳遞一個(gè)3過去。

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

}

問題：

先點(diǎn)主頁，再點(diǎn)商品詳情鏈接正確跳轉(zhuǎn)到商品詳情組件，再點(diǎn)商品詳情按鈕，問題來來，url中id變?yōu)閬?，內(nèi)容顯示中id沒有變還是2。

原因：

從home組件路由到component組件，商品詳情組件會(huì)被創(chuàng)建，它的constructor(),ngOnInit()會(huì)被調(diào)用一次。

但是從商品詳情組件直接路由到商品詳情，由于商品詳情組件在點(diǎn)擊商品詳情按鈕時(shí)已經(jīng)被創(chuàng)建了，它不會(huì)再次被創(chuàng)建，ngOnInit()方法不會(huì)再次被創(chuàng)建。所以productId依然保存著第一次被創(chuàng)建時(shí)候的值。

解決辦法：參數(shù)訂閱。

2、參數(shù)訂閱

rxjs的subscribe方法。

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

}

問題得以解決。

獲取路由參數(shù)時(shí)候：

確定一個(gè)組件不會(huì)從自身路由到自身，可以通過參數(shù)快照方式獲取參數(shù)。

不確定，則用參數(shù)訂閱方式獲取。

本文作者starof,因知識(shí)本身在變化，作者也在不斷學(xué)習(xí)成長，文章內(nèi)容也不定時(shí)更新，為避免誤導(dǎo)讀者，方便追根溯源，請(qǐng)諸位轉(zhuǎn)載注明出處：http://www.cnblogs.com/starof/p/9006185.html?有問題歡迎與我討論，共同進(jìn)步。

總結(jié)

以上是生活随笔為你收集整理的angular路由传递参数_Angular路由——在路由时候传递数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。