W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
本指南基于入門教程的第一步:基本 Angular 應(yīng)用入門。
在此階段,本在線商店應(yīng)用會(huì)擁有基本的產(chǎn)品目錄。
在以下各節(jié)中,你將向應(yīng)用添加以下功能:
本應(yīng)用已經(jīng)用 Angular ?Router
?導(dǎo)航到了 ?ProductListComponent
?。本節(jié)將介紹如何定義顯示單個(gè)產(chǎn)品詳情的路由。
product-details
? 組件:ng generate component product-details
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,
],
product-list.component.html
?。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
?。
ProductDetailsComponent
?組件,其顯示的內(nèi)容為 “product-details works!”。請(qǐng)注意,預(yù)覽窗口中的 URL 發(fā)生了變化。最后一個(gè)部分是 ?products/#
?,其中 ?#
? 表示你單擊的路由的編號(hào)。
?ProductDetailsComponent
?會(huì)處理每個(gè)產(chǎn)品的顯示工作。Angular 路由器會(huì)根據(jù)瀏覽器的 URL 和你定義的路徑來顯示組件。
在本節(jié)中,你將使用 Angular 路由器來組合 ?products
?數(shù)據(jù)和路由信息以顯示每個(gè)產(chǎn)品的特定詳情。
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';
product
?屬性。export class ProductDetailsComponent implements OnInit {
product: Product | undefined;
/* ... */
}
private route: ActivatedRoute
? 添加為構(gòu)造函數(shù)括號(hào)內(nèi)的參數(shù),來把 ?ActivatedRoute
?注入到 ?constructor()
? 中。export class ProductDetailsComponent implements OnInit {
product: Product | undefined;
constructor(private route: ActivatedRoute) { }
}
Angular 路由器加載的每個(gè)組件都有自己專屬的 ?ActivatedRoute
?。?ActivatedRoute
?中包含有關(guān)路由和路由參數(shù)的信息。
通過注入 ?ActivatedRoute
?,你可以配置此組件以使用服務(wù)。
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)。要訪問路由參數(shù),我們使用 ?route.snapshot
? ,它是一個(gè) ?ActivatedRouteSnapshot
?,其中包含有關(guān)該特定時(shí)刻的活動(dòng)路由信息。與此路由匹配的 URL 提供了 ?productId
?。Angular 會(huì)使用 ?productId
?來顯示每個(gè)唯一產(chǎn)品的詳情。
ProductDetailsComponent
?的模板以顯示帶有 ?*ngIf
?的產(chǎn)品詳情。如果產(chǎn)品存在,則此 ?<div>
? 會(huì)顯示名稱、價(jià)格和說明。<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ù)的方式。
ProductDetailsComponent
?,并展示產(chǎn)品詳情。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: