Angular布局组件中深层嵌套ng-container能否正确渲染内容？

问题核心 #

你的布局组件通过ng-content select="[aside]"和ng-content select="[main]"实现内容投影，但由于带aside/main属性的元素被嵌套在多层ng-container内部，而ng-content属于静态内容投影机制，只会扫描组件的直接子节点，无法穿透*ngIf对应的ng-container这类结构型指令去捕获深层元素，导致内容无法正确渲染到侧边栏和主内容区。

快速修复方案：调整内容层级，让目标元素成为layout的直接子元素 #

最直接的修复方式是将带aside/main属性的元素提升为layout组件的直接子节点，用结构指令控制它们的显示/隐藏，同时把加载状态提示放在对应的投影区域内。

修改后的App组件模板示例：

<layout>
  <ng-container *ngIf="data$ | async as result">
    <!-- 侧边栏内容 -->
    <div aside *ngIf="result.loading">loading...</div>
    <div aside *ngIf="result.isSuccess">
      aside content: {{ result.response.aside | json }}
    </div>

    <!-- 主内容区 -->
    <div main *ngIf="result.loading">loading...</div>
    <div main *ngIf="result.isSuccess">
      main content: {{ result.response.main | json }}
    </div>
  </ng-container>
</layout>

原理说明 #

调整后，带aside/main属性的div元素成为layout的直接子节点，Angular在处理内容投影时可以直接匹配到这些元素，将它们正确插入到对应的ng-content位置，从而实现双列布局的正常渲染。

进阶方案：动态内容投影（TemplateRef） #

如果需要处理更复杂的内容结构或需要在子组件中控制显示逻辑，可以改用TemplateRef实现动态投影，完全摆脱静态投影的层级限制：

1. 修改LayoutComponent，接收侧边栏和主内容的模板引用：

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

@Component({
  selector: 'layout',
  standalone: true,
  template: `
    <div class="container">
      <aside>
        <ng-container *ngTemplateOutlet="asideTemplate || defaultAside"></ng-container>
      </aside>
      <main>
        <ng-container *ngTemplateOutlet="mainTemplate || defaultMain"></ng-container>
      </main>
    </div>
    <ng-template #defaultAside>默认侧边栏</ng-template>
    <ng-template #defaultMain>默认主内容</ng-template>
  `,
  styles: [`.container {display:grid; grid-template-columns: 1fr 2fr} `],
})
export class LayoutComponent {
  @Input() asideTemplate?: TemplateRef<any>;
  @Input() mainTemplate?: TemplateRef<any>;
}

2. 在App组件中定义模板并传递给布局组件：

<layout 
  [asideTemplate]="asideTemp"
  [mainTemplate]="mainTemp"
></layout>

<ng-template #asideTemp let-result>
  <div *ngIf="result.loading">loading...</div>
  <div *ngIf="result.isSuccess">aside content: {{ result.response.aside | json }}</div>
</ng-template>

<ng-template #mainTemp let-result>
  <div *ngIf="result.loading">loading...</div>
  <div *ngIf="result.isSuccess">main content: {{ result.response.main | json }}</div>
</ng-template>

3. 在App组件类中通过上下文传递数据：

export class App {
  data$ = of<any>({
    response: { aside: [1, 2, 3, 4], main: [10, 12, 13, 14] },
    isSuccess: true,
  }).pipe(delay(1 * 1000), startWith({ loading: true }));

  get templateContext() {
    return { $implicit: this.data$ | async };
  }
}

这种方式更灵活，适合需要在子组件中动态控制内容的场景。

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