建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
添加導(dǎo)航
本指南基于入門(mén)教程的第一步：基本 Angular 應(yīng)用入門(mén)。
在此階段，本在線(xiàn)商店應(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)地在瀏覽器的歷史記錄中瀏覽。
關(guān)聯(lián) URL 路徑與組件
本應(yīng)用已經(jīng)用 Angular ?Router ?導(dǎo)航到了 ?ProductListComponent?。本節(jié)將介紹如何定義顯示單個(gè)產(chǎn)品詳情的路由。
- 生成用于展示產(chǎn)品詳情的新組件。在終端窗口運(yùn)行如下命令來(lái)生成一個(gè)新的 ?
product-details? 組件： - 在 ?
app.module.ts? 中，添加產(chǎn)品詳情的路由，其 ?path?為 ?products/:productId?，其 ?component?為 ?ProductDetailsComponent?。 - 打開(kāi) ?
product-list.component.html?。 - 修改產(chǎn)品名稱(chēng)上的鏈接，使其包括以 ?
product.id? 為參數(shù)的 ?routerLink?。 - 通過(guò)單擊產(chǎn)品名稱(chēng)，驗(yàn)證路由器是否如預(yù)期般工作。應(yīng)用中應(yīng)該顯示 ?
ProductDetailsComponent?組件，其顯示的內(nèi)容為 “product-details works!”。
ng generate component product-details@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
RouterModule.forRoot([
{ path: '', component: ProductListComponent },
{ path: 'products/:productId', component: ProductDetailsComponent },
])
],
declarations: [
AppComponent,
TopBarComponent,
ProductListComponent,
ProductAlertsComponent,
ProductDetailsComponent,
],?RouterLink ?指令可幫助你自定義 a 元素。在這里，路由或 URL 中包含一個(gè)固定的區(qū)段 ?/products?。最后一段則是變量，插入當(dāng)前產(chǎn)品的 ?id?。 例如，?id ?為 1 的產(chǎn)品的 URL 是 ?https://getting-started-myfork.stackblitz.io/products/1?。
請(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)品的特定詳情。
- 在 ?
product-details.component.ts? 中，從 ?@angular/router? 導(dǎo)入 ?ActivatedRoute?，并從 ?../products? 導(dǎo)入 ?products?數(shù)組。 - 定義 ?
product?屬性。 - 通過(guò)把 ?
private route: ActivatedRoute? 添加為構(gòu)造函數(shù)括號(hào)內(nèi)的參數(shù)，來(lái)把 ?ActivatedRoute?注入到 ?constructor()? 中。 - 在 ?
ngOnInit()? 方法中，從路由參數(shù)中提取 ?productId?，并在 ?products?數(shù)組中找到相應(yīng)的產(chǎn)品。 - 更新 ?
ProductDetailsComponent?的模板以顯示帶有 ?*ngIf?的產(chǎn)品詳情。如果產(chǎn)品存在，則此 ?? 會(huì)顯示名稱(chēng)、價(jià)格和說(shuō)明。Product Details
{{ product.name }}
{{ product.price | currency }}
{{ product.description }}
?
{{ product.price | currency }}
currency?管道將 ?product.price? 從數(shù)字轉(zhuǎn)換為貨幣字符串。管道是一種可以在 HTML 模板中轉(zhuǎn)換數(shù)據(jù)的方式。- 當(dāng)用戶(hù)單擊產(chǎn)品列表中的名稱(chēng)時(shí)，路由器會(huì)將其導(dǎo)航到產(chǎn)品的不同 URL，顯示此 ?
ProductDetailsComponent?，并展示產(chǎn)品詳情。
新聞標(biāo)題：創(chuàng)新互聯(lián)Angular教程：Angular添加導(dǎo)航
標(biāo)題路徑：http://m.5511xx.com/article/cdidhoj.html - 當(dāng)用戶(hù)單擊產(chǎn)品列表中的名稱(chēng)時(shí)，路由器會(huì)將其導(dǎo)航到產(chǎn)品的不同 URL，顯示此 ?
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Product, products } from '../products';export class ProductDetailsComponent implements OnInit {
product: Product | undefined;
/* ... */
}export class ProductDetailsComponent implements OnInit {
product: Product | undefined;
constructor(private route: ActivatedRoute) { }
}Angular 路由器加載的每個(gè)組件都有自己專(zhuān)屬的 ?ActivatedRoute?。?ActivatedRoute ?中包含有關(guān)路由和路由參數(shù)的信息。
通過(guò)注入 ?ActivatedRoute?，你可以配置此組件以使用服務(wù)。
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)。要訪(fǎng)問(wèn)路由參數(shù)，我們使用 ?route.snapshot? ，它是一個(gè) ?ActivatedRouteSnapshot?，其中包含有關(guān)該特定時(shí)刻的活動(dòng)路由信息。與此路由匹配的 URL 提供了 ?productId?。Angular 會(huì)使用 ?productId ?來(lái)顯示每個(gè)唯一產(chǎn)品的詳情。
