Angular2 - 如何使用具有动态 url 的路由器

# Angular 2中使用具有动态URL的路由器

typescript
// 导入必要的模块和服务
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserProfileComponent } from './user-profile/user-profile.component';
// 定义路由
const routes: Routes = [
  { path: 'profile/:id', component: UserProfileComponent }
];
// 设置路由器配置
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

typescript
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
  userId: string;
  constructor(private route: ActivatedRoute) { }
  ngOnInit(): void {
    // 使用ActivatedRoute服务获取动态参数
    this.route.params.subscribe(params => {
      this.userId = params['id'];
    });
  }
}