我們期望實現的場景：從product list Component點擊產品名稱超鏈接時，能跳轉到product detail Component，顯示選中的product的明細信息。

在product detail Component引入路由相關的library：

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

導入product sample data：

在product detail Component里定義一個名為product的property，同時通過將import的ActivatedRoute添加到Component的構造函數的參數里，實現注入的目的：

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.

實現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>

效果如下：

跳轉時的調試：

跳轉時選中的product的索引，通過參數productId傳入到product detail Component里：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。