如何用Angular生命周期钩子渲染三级及以上嵌套扩展面板内容

问题根源分析 #

你遇到的核心问题是生命周期钩子的触发时机和嵌套组件的视图初始化顺序不匹配：

• 一级面板用OnInit渲染，此时顶级视图已初始化，能正常获取模板；
• 二级面板用AfterViewInit，此时二级面板的父视图（一级）已完成初始化，也能拿到模板；
• 但三级及以上面板时，父面板的AfterViewInit触发时，深层嵌套的子面板还没被Angular初始化（因为未展开的面板内容会被Material的隐藏逻辑延迟加载），导致模板引用无法获取，最终内容不渲染。

解决方案：改用面板展开事件触发渲染 #

最可靠的方式是放弃依赖生命周期钩子的一次性渲染，改为监听面板的opened事件，在用户展开面板时再渲染内容。这样不管嵌套多少级，只要面板被展开，就会触发内容渲染，完美适配深层嵌套场景。

1. 封装自定义扩展面板组件

import { Component, Input, ContentChild, TemplateRef, ViewChild } from '@angular/core';
import { MatExpansionPanel } from '@angular/material/expansion';

@Component({
  selector: 'app-nested-expansion',
  template: `
    <mat-expansion-panel 
      [expanded]="initialExpanded" 
      (opened)="onPanelOpened()"
      (closed)="onPanelClosed()">
      <mat-expansion-panel-header>
        {{ panelTitle }}
      </mat-expansion-panel-header>
      <!-- 只有当面板展开时才渲染内容 -->
      <ng-container *ngIf="isPanelOpened">
        <ng-container [ngTemplateOutlet]="panelContent"></ng-container>
      </ng-container>
    </mat-expansion-panel>
  `
})
export class NestedExpansionComponent {
  @Input() panelTitle: string;
  @Input() initialExpanded = false;
  // 获取嵌套的内容模板
  @ContentChild('panelContent') panelContent: TemplateRef<any>;
  @ViewChild(MatExpansionPanel) matPanel: MatExpansionPanel;

  isPanelOpened = false;

  ngOnInit() {
    // 顶级面板默认展开时直接渲染
    if (this.initialExpanded && !this.matPanel._parent) {
      this.isPanelOpened = true;
    }
  }

  onPanelOpened() {
    // 用setTimeout确保Angular完成视图更新后再渲染
    setTimeout(() => {
      this.isPanelOpened = true;
    });
  }

  onPanelClosed() {
    // 可选：关闭面板时销毁内容，优化性能
    this.isPanelOpened = false;
  }
}

2. 使用嵌套面板（支持任意层级）

<!-- 一级面板 -->
<app-nested-expansion 
  panelTitle="一级面板" 
  [initialExpanded]="true">
  <ng-template #panelContent>
    <p>一级面板内容</p>
    <!-- 二级面板 -->
    <app-nested-expansion panelTitle="二级面板">
      <ng-template #panelContent>
        <p>二级面板内容</p>
        <!-- 三级面板 -->
        <app-nested-expansion panelTitle="三级面板">
          <ng-template #panelContent>
            <p>三级面板内容</p>
            <!-- 四级面板（支持无限嵌套） -->
            <app-nested-expansion panelTitle="四级面板">
              <ng-template #panelContent>
                <p>四级面板内容</p>
              </ng-template>
            </app-nested-expansion>
          </ng-template>
        </app-nested-expansion>
      </ng-template>
    </app-nested-expansion>
  </ng-template>
</app-nested-expansion>

关键优化点说明 #

1. 延迟渲染逻辑：只有当面板被展开时才渲染内容，避免深层嵌套组件在初始化时未被创建的问题；
2. setTimeout的作用：确保Angular有足够时间完成面板视图的更新，保证ContentChild能正确获取到嵌套的模板引用；
3. 通用化处理：所有层级面板使用同一渲染逻辑，无需区分一级/二级/三级，彻底解决层级限制问题。

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