如何在angular中处理多条完全动态的路由？

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DynamicComponent } from './dynamic.component';

const routes: Routes = [
  { path: 'dynamic/:id', component: DynamicComponent }
];

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

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

@Component({
  selector: 'app-dynamic',
  template: '<h1>Dynamic Component - ID: {{ id }}</h1>'
})
export class DynamicComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = params['id'];
    });
  }
}

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="navigateToDynamic(1)">Navigate to Dynamic 1</button>
    <button (click)="navigateToDynamic(2)">Navigate to Dynamic 2</button>
  `
})
export class AppComponent {
  constructor(private router: Router) { }

  navigateToDynamic(id: number) {
    this.router.navigate(['/dynamic', id]);
  }
}