面试题：Angular路由系统中如何配置路由参数及获取参数值

Question

在Angular路由系统里，假设你要创建一个带参数的路由，比如商品详情页路由，参数为商品ID。请描述如何在路由配置文件中定义这个路由，以及在组件中如何获取该商品ID参数的值。

Answer 1

1. 在路由配置文件中定义带参数的路由

在Angular的路由配置数组中，定义一个路径包含参数的路由。例如，假设app-routing.module.ts是你的路由配置文件，代码如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductDetailComponent } from './product-detail/product-detail.component';

const routes: Routes = [
  {
    path: 'product/:productId', 
    component: ProductDetailComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这里path: 'product/:productId'表示路径为product后跟随一个参数productId，当访问如/product/123这样的URL时，就会匹配到这个路由，并加载ProductDetailComponent组件。

2. 在组件中获取商品ID参数的值

在ProductDetailComponent组件中，可以通过ActivatedRoute服务来获取参数值。首先在组件的构造函数中注入ActivatedRoute：

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent {
  productId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.productId = params.get('productId');
    });
  }
}

上述代码中，通过this.route.paramMap.subscribe订阅paramMap observable，当路由参数发生变化时，params.get('productId')会获取到最新的productId参数值，并赋值给组件的productId属性。这样就可以在组件中使用该商品ID进行后续操作，比如根据ID获取商品详细信息等。