如何在app路由模块中以不同的路径使用同一组件两次

import { NgModule } from '@angular/core';
import import { RouterModule, Routes } from '@angular/router';
import { Component1Component } from './component1.component';
import { Component2Component } from './component2.component';

const routes: Routes = [
  { path: 'component1/:id', component: Component1Component },
  { path: 'component2/:id', component: Component2Component },
];

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

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

@Component({
  selector: 'app-component1',
  template: '<h1>Component 1</h1>',
})
export class Component1Component implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    // 根据id执行相应的逻辑处理
  }
}

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

@Component({
  selector: 'app-component2',
  template: '<h1>Component 2</h1>',
})
export class Component2Component implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    // 根据id执行相应的逻辑处理
  }
}