面试题：Angular中如何配置带参数的路由并在组件中获取参数？

Question

在Angular路由中，假设我们有一个需求，要跳转到一个显示用户详情的页面，且该页面需要根据用户ID来展示不同用户的信息。请描述如何配置这样带参数的路由，以及在目标组件中如何获取这个参数。

Answer 1

配置带参数的路由

1. 在 app-routing.module.ts 中定义路由配置：

   const routes: Routes = [
     {
       path: 'user/:id', // 这里 :id 是参数占位符
       component: UserDetailComponent
     }
   ];
   

2. 导入并配置路由模块：

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

在目标组件中获取参数

1. 在 UserDetailComponent 组件中注入 ActivatedRoute：

   import { Component } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';
   
   @Component({
     selector: 'app-user-detail',
     templateUrl: './user-detail.component.html',
     styleUrls: ['./user-detail.component.css']
   })
   export class UserDetailComponent {
     userId: string;
   
     constructor(private route: ActivatedRoute) {
       // 使用 snapshot 获取参数，适用于非动态路由
       this.userId = this.route.snapshot.paramMap.get('id');
   
       // 若路由参数可能会动态变化，使用 Observable 来订阅参数变化
       this.route.paramMap.subscribe(params => {
         this.userId = params.get('id');
       });
     }
   }