angular - 路由router

来自官网学习个人总结

定义路由

1. 生成一个 componentng generate component product-details
2. 将路由详情配置于 app.module.ts

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

3. 声明式路由

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

根据路由动态渲染

1. 从@angular/router中导入ActivatedRoute;

2. ActivatedRoute通过在构造函数 constructor() 添加作为参数来注入。 ActivatedRoute特定存放了每个路由的加载组件与参数信息。

3. 在 ngOnInit() 函数中将路由的productId参数提取出来，并找到 products 数组中相应的 product.

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { Product, products } from "../products";
export class ProductDetailsComponent implements OnInit {
  product: Product | undefined;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    //route.snapshot --> 当前active的路由信息.
    const routeParams = this.route.snapshot.paramMap;
    // 从当前路由拿出 product id
    const productIdFromRoute = Number(routeParams.get("productId"));

    // 找到此id所对应的product
    this.product = products.find(
      (product) => product.id === productIdFromRoute
    );
  }
}