8. 路由

1. 注册路由

• 1. 在文件 app.module.ts 增加1个路由

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

• 2. 使用routerLink 指令定义链接

routerLink 定义用户是如何导航到在组件模板中声明的路由（或URL）的。

》 src/app/product-list/product-list.component.html

<div *ngFor="let product of products; index as productId">
<h3>
<a [title]="product.name+ 'details'" [routerLink]="['/products', productId]">
{{product.name}}
</a>
</h3>
<>

2. 使用路由信息

用 product-detail 组件显示每个产品的详细信息

• 1. 导入 ActivatedRoute from @angular/core , products array from ../products
• 2. 定义product 属性， 并且注入 Activatedoute 到构造函数
• 3. 在ngOnInit() method 中订阅（subscribe）路由参数（ route params）， 并根据其productId 获取商品信息
• 4. 修改模板，在*ngIf 中显示商品详情

》src/app/product-details/product-details.component.ts

import {Component, OnInit} from '@angular/core'
import {ActivatedRoute } from '@angular/router'
import {product} from '../products'
export class ProductDetailsComponent implements OnInit {
product;
constructor(
private route: ActivatedRoute,
){}
ngOnInit() {
this.route.paramMap.subscribe(params => {this.product= products[+params.get('productId')]})
}
}

》src/app/product-details/product-details.component.html

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