Angular复用同性质组件：通过菜单标题路由至单一组件

完全可以通过配置多路由指向同一组件，结合路由参数传递标题来实现需求，以下是具体实现步骤：

1. 配置多路由指向同一组件 #

在app-routing.module.ts中，为每个菜单对应的路径配置独立路由，统一指向TestComponent1，并通过data字段传递对应的标题：

const routes: Routes = [
  { path: 'TestComponent1', component: TestComponent1, data: { title: 'Test组件1' } },
  { path: 'TestComponent2', component: TestComponent1, data: { title: 'Test组件2' } },
  { path: 'TestComponent3', component: TestComponent1, data: { title: 'Test组件3' } },
  // 可根据需求添加更多路由
];

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

这种配置方式不会同时加载所有组件，只有当用户访问对应路径时，Angular才会实例化组件（默认会复用同一组件的实例，避免重复创建）。

2. 组件内接收标题并动态展示 #

在TestComponent1中，通过ActivatedRoute获取路由data中的标题，用于组件内显示或设置浏览器标签页标题：

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

@Component({
  selector: 'app-test-component1',
  templateUrl: './test-component1.component.html',
  styleUrls: ['./test-component1.component.css']
})
export class TestComponent1 implements OnInit {
  currentTitle: string = '';

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 初始化时获取标题
    this.currentTitle = this.route.snapshot.data['title'];
    document.title = this.currentTitle;

    // 订阅路由data变化，支持同一组件内路由切换时更新标题（无需刷新页面）
    this.route.data.subscribe(data => {
      this.currentTitle = data['title'];
      document.title = this.currentTitle;
    });
  }
}

在组件模板中使用获取到的标题：

<h2>{{ currentTitle }}</h2>
<!-- 原有组件功能代码 -->

3. 配置菜单路由链接 #

菜单直接指向对应的路由路径即可，点击时会切换路由并复用组件：

<nav>
  <a routerLink="/TestComponent1" routerLinkActive="active">TestComponent1</a>
  <a routerLink="/TestComponent2" routerLinkActive="active">TestComponent2</a>
  <a routerLink="/TestComponent3" routerLinkActive="active">TestComponent3</a>
</nav>

这种方案既避免了重复创建组件，又能根据不同菜单路由展示对应的标题，解决了你之前遇到的同时加载组件、标题异常的问题。

内容的提问来源于stack exchange，提问作者Osama Javed