Angular 8 如何根据条件动态切换内容的父容器标签

Angular 本身没有提供你示例中 table|div 这类直接简写的语法糖，以下是两种常用的可落地实现方式：

方案1：ng-template 复用公共内容（推荐，实现成本最低） #

把不需要变的内层公共内容抽离为独立模板，外层用 *ngIf 判断渲染对应标签，分别引入公共模板即可。

示例代码 #

<!-- 抽离所有公共内层内容 -->
<ng-template #commonContent>
  此处为带所有样式的内容
  <!-- 其他所有内层元素都放在这里 -->
</ng-template>

<!-- 按条件渲染外层标签 -->
<table 
  *ngIf="useTable; else renderDiv" 
  class="someClass" 
  [ngClass]="{'another-class': condition}"
>
  <ng-container *ngTemplateOutlet="commonContent"></ng-container>
</table>

<ng-template #renderDiv>
  <div 
    class="someClass" 
    [ngClass]="{'another-class': condition}"
  >
    <ng-container *ngTemplateOutlet="commonContent"></ng-container>
  </div>
</ng-template>

优缺点 #

• 优点：无需额外封装，所有Angular版本原生支持，逻辑直观不容易出问题
• 缺点：如果外层标签的属性非常多，需要写两次，有少量冗余

方案2：自定义结构型指令（适合高频复用场景） #

如果你需要大量使用这种动态标签的逻辑，可以封装一个自定义指令，实现接近你期望的简洁写法。

第一步：生成并编写指令 #

执行命令生成指令：
ng generate directive dynamicTag
指令代码：

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

@Directive({
  selector: '[dynamicTag]'
})
export class DynamicTagDirective {
  private hostElement: HTMLElement | null = null;

  @Input() set dynamicTag(tagName: 'table' | 'div') {
    // 销毁之前创建的元素避免内存泄漏
    if (this.hostElement) {
      this.renderer.removeChild(this.viewContainer.element.nativeElement.parentNode, this.hostElement);
      this.hostElement = null;
    }
    // 创建新标签
    this.hostElement = this.renderer.createElement(tagName);
    // 插入模板内容
    const view = this.viewContainer.createEmbeddedView(this.templateRef);
    view.rootNodes.forEach(node => this.renderer.appendChild(this.hostElement!, node));
    // 插入到DOM中
    this.renderer.appendChild(this.viewContainer.element.nativeElement.parentNode, this.hostElement!);
  }

  // 绑定类名
  @Input() set dynamicTagClass(classStr: string) {
    if (this.hostElement) {
      this.hostElement.className = classStr;
    }
  }

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

第二步：模板中使用 #

<ng-container 
  *dynamicTag="useTable ? 'table' : 'div'"
  [dynamicTagClass]="'someClass ' + (condition ? 'another-class' : '')"
>
  此处为带所有样式的内容
</ng-container>

优缺点 #

• 优点：使用时逻辑简洁，外层属性仅需维护一份，适合高频使用场景
• 缺点：需要自行维护指令逻辑，注意处理元素销毁、属性更新的边界情况，避免内存泄漏

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