我們期望實(shí)現(xiàn)的場景：從product list Component點(diǎn)擊產(chǎn)品名稱超鏈接時，能跳轉(zhuǎn)到product detail Component，顯示選中的product的明細(xì)信息。

在product detail Component引入路由相關(guān)的library：

import { ActivatedRoute } from ‘@angular/router’;

導(dǎo)入product sample data：

在product detail Component里定義一個名為product的property，同時通過將import的ActivatedRoute添加到Component的構(gòu)造函數(shù)的參數(shù)里，實(shí)現(xiàn)注入的目的：

The ActivatedRoute is specific to each routed component that the Angular Router loads. It contains information about the route, its parameters, and additional data associated with the route.
By injecting the ActivatedRoute, you are configuring the component to use a service.

實(shí)現(xiàn)ngOnInit：

ngOnInit() {this.route.paramMap.subscribe(params => {this.product = products[+params.get('productId')];}); }

The route parameters correspond to the path variables you define in the route. The URL that matches the route provides the productId. Angular uses the productId to display the details for each unique product.

在product detail Component顯示product property的信息：

<h2>Product Details</h2><div *ngIf="product"><h3>{{ product.name }}</h3><h4>{{ product.price | currency }}</h4><p>{{ product.description }}</p></div>

效果如下：

跳轉(zhuǎn)時的調(diào)試：

跳轉(zhuǎn)時選中的product的索引，通過參數(shù)productId傳入到product detail Component里：

要獲取更多Jerry的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":

總結(jié)

以上是生活随笔為你收集整理的Angular路由跳转时，如何传递信息的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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