Angular模板中如何条件性包含元素但始终保留其子元素？

当然能实现！你碰到的*ngIf的问题确实很常见——它会把指令所在的元素连带所有子节点一起从DOM里移除，没法单独保留子元素。要达成「父元素按需存在，子元素始终显示」的需求，有几个实用的方案：

1. 用<ng-template>复用子内容（推荐） #

这种方法能避免重复编写子元素代码，后续维护更方便。先把需要始终显示的子内容定义成模板，再根据条件决定是否用目标父元素包裹它：

<!-- 定义可复用的子内容模板 -->
<ng-template #persistentChild>
  <span>这是始终要显示的子元素</span>
</ng-template>

<!-- 条件成立时，用mySpecialElement包裹子内容 -->
<my-special-element *ngIf="showSpecialElement">
  <ng-container *ngTemplateOutlet="persistentChild"></ng-container>
</my-special-element>

<!-- 条件不成立时，直接渲染子内容 -->
<ng-container *ngIf="!showSpecialElement">
  <ng-container *ngTemplateOutlet="persistentChild"></ng-container>
</ng-container>

当showSpecialElement为true时，DOM里会有<my-special-element>包裹着<span>；为false时，只会渲染<span>，完全符合你的需求。

2. 用ngSwitch做分支渲染（适合简单场景） #

如果子内容非常简短，也可以直接用ngSwitch分两个分支处理，虽然会重复子内容，但代码更紧凑：

<ng-container [ngSwitch]="showSpecialElement">
  <my-special-element *ngSwitchCase="true">
    <span>这是始终要显示的子元素</span>
  </my-special-element>
  <span *ngSwitchDefault>这是始终要显示的子元素</span>
</ng-container>

注意：这种方式的子内容是重复的，后续修改时要同步改两处，所以只推荐子内容极简单的场景使用。

3. 自定义结构指令（进阶复用方案） #

如果这个需求在你的项目中频繁出现，也可以封装一个自定义结构指令（比如*wrapIf），让它根据条件自动决定是否用指定元素包裹内容。

指令实现示例： #

import { Directive, Input, TemplateRef, ViewContainerRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[wrapIf]'
})
export class WrapIfDirective {
  @Input() set wrapIf(condition: boolean) {
    this.viewContainer.clear();
    
    if (condition) {
      // 创建指定的包裹元素
      const wrapper = this.renderer.createElement(this.wrapElement);
      // 渲染模板内容到包裹元素中
      const view = this.viewContainer.createEmbeddedView(this.templateRef);
      view.rootNodes.forEach(node => this.renderer.appendChild(wrapper, node));
      // 将包裹元素添加到DOM
      this.viewContainer.insert(this.renderer.createText('')).parentNode?.appendChild(wrapper);
    } else {
      // 直接渲染模板内容
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }

  // 允许自定义包裹的元素标签名，默认是div
  @Input() wrapElement: string = 'div';

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private renderer: Renderer2
  ) { }
}

使用方式： #

<ng-container *wrapIf="showSpecialElement; wrapElement: 'mySpecialElement'">
  <span>这是始终要显示的子元素</span>
</ng-container>

这个指令可以灵活适配不同的包裹元素，不过需要注意处理一些边界情况（比如元素属性、事件绑定等），适合有一定Angular开发经验的同学。

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