Angular 添加導(dǎo)航

添加導(dǎo)航

本指南基于入門教程的第一步：基本 Angular 應(yīng)用入門。

在此階段，本在線商店應(yīng)用會(huì)擁有基本的產(chǎn)品目錄。

在以下各節(jié)中，你將向應(yīng)用添加以下功能：

• 在地址欄中鍵入 URL 以導(dǎo)航到相應(yīng)的產(chǎn)品頁(yè)面。
• 單擊頁(yè)面上的鏈接以在單頁(yè)應(yīng)用中導(dǎo)航。
• 單擊瀏覽器的后退和前進(jìn)按鈕以直觀地在瀏覽器的歷史記錄中瀏覽。

關(guān)聯(lián) URL 路徑與組件

本應(yīng)用已經(jīng)用 Angular ?Router ?導(dǎo)航到了 ?ProductListComponent?。本節(jié)將介紹如何定義顯示單個(gè)產(chǎn)品詳情的路由。

1. 生成用于展示產(chǎn)品詳情的新組件。在終端窗口運(yùn)行如下命令來(lái)生成一個(gè)新的 ?product-details? 組件：

ng generate component product-details

2. 在 ?app.module.ts? 中，添加產(chǎn)品詳情的路由，其 ?path ?為 ?products/:productId?，其 ?component ?為 ?ProductDetailsComponent?。

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
      { path: 'products/:productId', component: ProductDetailsComponent },
    ])
  ],
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
    ProductDetailsComponent,
  ],

3. 打開 ?product-list.component.html?。
4. 修改產(chǎn)品名稱上的鏈接，使其包括以 ?product.id? 為參數(shù)的 ?routerLink?。

<div *ngFor="let product of products">

  <h3>
    <a
      [title]="product.name + ' details'"
      [routerLink]="['/products', product.id]">
      {{ product.name }}
    </a>
  </h3>

  <!-- . . . -->

</div>

?RouterLink ?指令可幫助你自定義 a 元素。在這里，路由或 URL 中包含一個(gè)固定的區(qū)段 ?/products?。最后一段則是變量，插入當(dāng)前產(chǎn)品的 ?id?。 例如，?id ?為 1 的產(chǎn)品的 URL 是 ?https://getting-started-myfork.stackblitz.io/products/1?。

5. 通過(guò)單擊產(chǎn)品名稱，驗(yàn)證路由器是否如預(yù)期般工作。應(yīng)用中應(yīng)該顯示 ?ProductDetailsComponent ?組件，其顯示的內(nèi)容為 “product-details works!”。

請(qǐng)注意，預(yù)覽窗口中的 URL 發(fā)生了變化。最后一個(gè)部分是 ?products/#?，其中 ?#? 表示你單擊的路由的編號(hào)。

查看產(chǎn)品詳情

?ProductDetailsComponent ?會(huì)處理每個(gè)產(chǎn)品的顯示工作。Angular 路由器會(huì)根據(jù)瀏覽器的 URL 和你定義的路徑來(lái)顯示組件。

在本節(jié)中，你將使用 Angular 路由器來(lái)組合 ?products ?數(shù)據(jù)和路由信息以顯示每個(gè)產(chǎn)品的特定詳情。

1. 在 ?product-details.component.ts? 中，從 ?@angular/router? 導(dǎo)入 ?ActivatedRoute?，并從 ?../products? 導(dǎo)入 ?products ?數(shù)組。

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

import { Product, products } from '../products';

2. 定義 ?product ?屬性。

export class ProductDetailsComponent implements OnInit {

  product: Product | undefined;
  /* ... */
}

3. 通過(guò)把 ?private route: ActivatedRoute? 添加為構(gòu)造函數(shù)括號(hào)內(nèi)的參數(shù)，來(lái)把 ?ActivatedRoute ?注入到 ?constructor()? 中。

export class ProductDetailsComponent implements OnInit {

  product: Product | undefined;

  constructor(private route: ActivatedRoute) { }

}

Angular 路由器加載的每個(gè)組件都有自己專屬的 ?ActivatedRoute?。?ActivatedRoute ?中包含有關(guān)路由和路由參數(shù)的信息。

通過(guò)注入 ?ActivatedRoute?，你可以配置此組件以使用服務(wù)。

4. 在 ?ngOnInit()? 方法中，從路由參數(shù)中提取 ?productId?，并在 ?products ?數(shù)組中找到相應(yīng)的產(chǎn)品。

ngOnInit() {
  // First get the product id from the current route.
  const routeParams = this.route.snapshot.paramMap;
  const productIdFromRoute = Number(routeParams.get('productId'));

  // Find the product that correspond with the id provided in route.
  this.product = products.find(product => product.id === productIdFromRoute);
}

路由參數(shù)與你在此路由中定義的路徑變量相對(duì)應(yīng)。要訪問(wèn)路由參數(shù)，我們使用 ?route.snapshot? ，它是一個(gè) ?ActivatedRouteSnapshot?，其中包含有關(guān)該特定時(shí)刻的活動(dòng)路由信息。與此路由匹配的 URL 提供了 ?productId?。Angular 會(huì)使用 ?productId ?來(lái)顯示每個(gè)唯一產(chǎn)品的詳情。

5. 更新 ?ProductDetailsComponent ?的模板以顯示帶有 ?*ngIf ?的產(chǎn)品詳情。如果產(chǎn)品存在，則此 ?<div>? 會(huì)顯示名稱、價(jià)格和說(shuō)明。

<h2>Product Details</h2>

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

?<h4>{{ product.price | currency }}</h4>? 這一行，使用 ?currency ?管道將 ?product.price? 從數(shù)字轉(zhuǎn)換為貨幣字符串。管道是一種可以在 HTML 模板中轉(zhuǎn)換數(shù)據(jù)的方式。

6. 當(dāng)用戶單擊產(chǎn)品列表中的名稱時(shí)，路由器會(huì)將其導(dǎo)航到產(chǎn)品的不同 URL，顯示此 ?ProductDetailsComponent?，并展示產(chǎn)品詳情。