如何从路由加载的子组件更新Angular父组件的侧边栏内容

完全可以实现这种类似Razor @section 的效果，不需要额外的Service，通过Angular的模板引用、自定义指令即可完成。以下是具体实现步骤：

步骤1：修改父组件（AppComponent） #

首先在父组件中定义侧边栏的容器，添加一个方法用来接收并渲染子组件传递的侧边栏模板：

app.component.ts #

import { Component, ViewChild, ViewContainerRef, TemplateRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  // 侧边栏内容容器的引用
  @ViewChild('sidebarContainer', { read: ViewContainerRef }) sidebarContainer!: ViewContainerRef;
  // 默认侧边栏模板引用
  @ViewChild('defaultSidebar') defaultSidebar!: TemplateRef<any>;

  ngOnInit(): void {
    // 初始化加载默认侧边栏
    this.setSidebarContent(null);
  }

  // 设置侧边栏内容的方法
  setSidebarContent(template: TemplateRef<any> | null): void {
    this.sidebarContainer.clear();
    // 优先使用子组件传递的模板，否则用默认模板
    const targetTemplate = template || this.defaultSidebar;
    this.sidebarContainer.createEmbeddedView(targetTemplate);
  }
}

app.component.html #

<div id="main">
  <div id="sidepanel">
    <!-- 侧边栏内容渲染容器 -->
    <ng-template #sidebarContainer></ng-template>
    <!-- 默认侧边栏内容 -->
    <ng-template #defaultSidebar>
      <p>默认侧边栏内容</p>
    </ng-template>
  </div>
  <div id="content">
    <router-outlet></router-outlet>
  </div>
</div>

步骤2：创建自定义指令 #

这个指令用来标记子组件中要放到父组件侧边栏的模板，并自动将模板传递给父组件：

sidebar-content.directive.ts #

import { Directive, TemplateRef, OnInit, Inject } from '@angular/core';
import { AppComponent } from './app.component';

@Directive({
  selector: '[appSidebarContent]'
})
export class SidebarContentDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    // 注入父组件实例
    @Inject(AppComponent) private parentComponent: AppComponent
  ) {}

  ngOnInit(): void {
    // 将标记的模板传递给父组件
    this.parentComponent.setSidebarContent(this.templateRef);
  }
}

记得在你的模块中声明这个指令：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { SidebarContentDirective } from './sidebar-content.directive';
// 引入你的路由组件
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserComponent } from './user/user.component';

@NgModule({
  declarations: [
    AppComponent,
    SidebarContentDirective,
    DashboardComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', component: DashboardComponent },
      { path: 'user', component: UserComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：在子组件中使用指令 #

在路由加载的子组件模板中，用appSidebarContent指令标记要显示在父组件侧边栏的内容：

示例：dashboard.component.html #

<!-- 子组件自身的主内容 -->
<div class="dashboard-content">
  <h1>仪表盘</h1>
  <p>这是仪表盘的主内容区域</p>
</div>

<!-- 要投影到父组件侧边栏的内容 -->
<ng-template appSidebarContent>
  <div class="dashboard-sidebar">
    <h3>仪表盘专属侧边栏</h3>
    <ul>
      <li>数据概览</li>
      <li>快捷操作</li>
      <li>系统通知</li>
    </ul>
  </div>
</ng-template>

示例：user.component.html #

<!-- 子组件自身的主内容 -->
<div class="user-content">
  <h1>用户中心</h1>
  <p>这是用户中心的主内容区域</p>
</div>

<!-- 要投影到父组件侧边栏的内容 -->
<ng-template appSidebarContent>
  <div class="user-sidebar">
    <h3>用户专属侧边栏</h3>
    <ul>
      <li>个人信息</li>
      <li>账号设置</li>
      <li>安全中心</li>
    </ul>
  </div>
</ng-template>

效果说明 #

当路由切换到不同的子组件时，父组件的侧边栏会自动更新为当前子组件中标记的内容；如果子组件没有提供appSidebarContent模板，则会显示父组件中定义的默认侧边栏内容。

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