Angular中ng-content在ngSwitch分支中失效问题求助

问题原因 #

Angular的ng-content基于内容投影机制，同一投影内容只能被渲染一次。当多个*ngSwitchCase和*ngSwitchDefault分支中都放置ng-content时，只有最后被激活的分支能获取到投影内容，未激活分支的ng-content因内容已被“消耗”而失效。

解决方案 #

方案一：复用同一投影内容（用ng-template+ngTemplateOutlet）

如果需要在多个分支显示相同的投影内容，可通过模板引用变量将内容封装到ng-template，再用ngTemplateOutlet在各分支复用。

1. 父组件调用时，将投影内容放入带引用的ng-template：

<app-switch-component [switchValue]="currentValue">
  <ng-template #sharedContent>
    这是要在多分支复用的投影内容
  </ng-template>
</app-switch-component>

2. 子组件模板中，在各ngSwitch分支通过ngTemplateOutlet渲染模板：

<div [ngSwitch]="switchValue">
  <div *ngSwitchCase="'A'">
    <ng-container [ngTemplateOutlet]="sharedContent"></ng-container>
  </div>
  <div *ngSwitchCase="'B'">
    <ng-container [ngTemplateOutlet]="sharedContent"></ng-container>
  </div>
  <div *ngSwitchDefault>
    <ng-container [ngTemplateOutlet]="sharedContent"></ng-container>
  </div>
</div>

3. 子组件TS文件中获取模板引用：

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

@Component({
  selector: 'app-switch-component',
  templateUrl: './switch-component.component.html'
})
export class SwitchComponentComponent {
  @Input() switchValue: string;
  @ContentChild('sharedContent') sharedContent: TemplateRef<any>;
}

方案二：区分不同分支的投影内容（用ng-content的select属性）

如果不同分支需要显示不同的投影内容，可给ng-content设置select属性，指定不同的投影槽。

1. 父组件调用时，给不同内容标记专属slot：

<app-switch-component [switchValue]="currentValue">
  <div slot="caseA">分支A专属内容</div>
  <div slot="caseB">分支B专属内容</div>
  <div slot="default">默认分支内容</div>
</app-switch-component>

2. 子组件模板中，各分支的ng-content通过select匹配对应slot：

<div [ngSwitch]="switchValue">
  <div *ngSwitchCase="'A'">
    <ng-content select="[slot='caseA']"></ng-content>
  </div>
  <div *ngSwitchCase="'B'">
    <ng-content select="[slot='caseB']"></ng-content>
  </div>
  <div *ngSwitchDefault>
    <ng-content select="[slot='default']"></ng-content>
  </div>
</div>

适用场景 #

• 方案一适合同一内容需要在多个分支展示的场景；
• 方案二适合不同分支需要独立投影内容的场景。

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