Angular 17：如何自动将子导航组件追加至各页面组件？

Angular没有原生的HTML模板继承功能，但可以通过以下两种简洁方式实现自动添加子导航，避免重复编写代码：

方案1：内容投影 + 布局组件 #

创建一个通用的工具板块布局组件，将子导航固定在其中，通过<ng-content>投影子页面的内容。所有工具板块的子页面只需嵌套在这个布局组件内，就能自动带上子导航。

步骤1：创建工具布局组件 #

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

@Component({
  selector: 'app-tools-layout',
  templateUrl: './tools-layout.component.html',
  styleUrl: './tools-layout.component.scss'
})
export class ToolsLayoutComponent {}

对应的tools-layout.component.html：

<app-tools-subnav></app-tools-subnav>
<ng-content></ng-content> <!-- 这里会渲染子页面的内容 -->

步骤2：改造子页面组件 #

以ToolsCreateTopicHeaderComponent为例，修改其模板，去掉手动添加的app-tools-subnav，改用布局组件包裹内容：

<app-tools-layout>
  <div class="main">
    <h2>Create Topic Header</h2>
    ...
  </div>
</app-tools-layout>

方案2：路由嵌套（适合多页面路由场景） #

如果你的工具板块是通过路由切换不同子页面，路由嵌套是更优的选择。父路由对应包含子导航的工具主页面，子路由的内容自动渲染在父页面的指定区域。

步骤1：配置嵌套路由 #

在app-routing.module.ts中设置工具板块的父路由和子路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ToolsPageComponent } from './tools-page.component';
import { ToolsCreateTopicHeaderComponent } from './tools-create-topic-header.component';
// 导入其他工具子组件

const routes: Routes = [
  {
    path: 'tools',
    component: ToolsPageComponent, // 父组件承载子导航
    children: [
      { path: 'create-topic', component: ToolsCreateTopicHeaderComponent },
      // 添加其他工具子页面的路由规则
      { path: '', redirectTo: 'create-topic', pathMatch: 'full' } // 设置默认子路由
    ]
  }
];

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

步骤2：修改工具主页面模板 #

在tools-page.component.html中添加<router-outlet>，用于渲染子路由的内容：

<app-tools-subnav></app-tools-subnav>
<router-outlet></router-outlet> <!-- 子页面内容会自动加载到这里 -->

之后访问/tools/create-topic时，app-tools-subnav会持续显示，子页面内容自动渲染到<router-outlet>区域，无需在子组件中重复编写子导航代码。

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