Angular路由场景下如何在子组件中复用静态菜单？

方案1：封装独立共享菜单组件 #

这是最省心的方式，彻底杜绝重复代码：

• 新建一个独立的菜单组件（比如app-shared-menu），把静态菜单的HTML和样式都写在这个组件里
• 在需要显示菜单的两个子组件中，直接添加该组件标签即可

共享菜单组件模板示例 (shared-menu.component.html) #

<nav class="static-menu">
  <a routerLink="/home">首页</a>
  <a routerLink="/profile">个人中心</a>
  <a routerLink="/settings">设置</a>
</nav>

子组件使用示例（以子组件1为例） #

<div class="child-page">
  <app-shared-menu></app-shared-menu>
  <div class="page-content">子组件1的具体内容</div>
</div>

方案2：用ng-template+ngTemplateOutlet传递菜单模板 #

如果不想单独做组件，可在父组件定义菜单模板，通过路由上下文传给子组件渲染：

父组件模板 #

<!-- 定义可复用的菜单模板 -->
<ng-template #staticMenuTpl>
  <nav class="static-menu">
    <a routerLink="/home">首页</a>
    <a routerLink="/profile">个人中心</a>
    <a routerLink="/settings">设置</a>
  </nav>
</ng-template>

<!-- 通过router-outlet传递模板引用 -->
<router-outlet [outletContext]="{menuTpl: staticMenuTpl}"></router-outlet>

子组件接收并渲染模板 #

在子组件的TS文件中声明输入属性：

import { Component, Input, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
})
export class ChildComponent {
  @Input() menuTpl: TemplateRef<any>;
}

子组件模板中渲染菜单：

<div class="child-page">
  <ng-container *ngTemplateOutlet="menuTpl"></ng-container>
  <div class="page-content">子组件内容</div>
</div>

方案3：父组件固定菜单+router-outlet加载子内容 #

如果菜单是全局布局的一部分（比如顶部导航、侧边栏），直接把菜单放在父组件的router-outlet外面，所有通过这个路由出口加载的子组件都会自动带上菜单，无需子组件做任何额外处理：

父组件模板示例 #

<!-- 全局静态菜单 -->
<nav class="static-menu">
  <a routerLink="/home">首页</a>
  <a routerLink="/profile">个人中心</a>
  <a routerLink="/settings">设置</a>
</nav>

<!-- 子组件内容加载区域 -->
<router-outlet></router-outlet>

内容的提问来源于stack exchange，提问作者A. Morel