Angular中移除ngSwitchCase内冗余HTML代码的方法

方案1：使用局部模板（ng-template）抽离重复代码 #

把重复的<app-device>代码定义成可复用的局部模板，在各个ngSwitchCase分支里通过ngTemplateOutlet引用即可，仅保留每个分支独有的内容（比如不同图标）。

实现代码： #

<!-- 定义可复用的局部模板，包含重复的app-device代码 -->
<ng-template #deviceSection>
  <div>
    <app-device
      *ngIf="status"
      [statusInformation]="status"
    ></app-device>
    <app-device
      *ngIf="information"
      [statusInformation]="information"
    ></app-device>
  </div>
</ng-template>

<!-- ngSwitch主结构 -->
<div [ngSwitch]="currentCase">
  <div *ngSwitchCase="case1">
    <div>
      <div>
        <i>Icon 1</i>
      </div>
      <!-- 引用重复的模板 -->
      <ng-container [ngTemplateOutlet]="deviceSection"></ng-container>
    </div>
  </div>

  <div *ngSwitchCase="case2">
    <div>
      <div>
        <i>Icon 2</i>
      </div>
      <ng-container [ngTemplateOutlet]="deviceSection"></ng-container>
    </div>
  </div>

  <div *ngSwitchCase="case3">
    <div>
      <div>
        <i>Icon 3</i>
      </div>
      <ng-container [ngTemplateOutlet]="deviceSection"></ng-container>
    </div>
  </div>
</div>

方案2：封装成独立组件（适合跨组件复用） #

如果这部分重复代码不仅在当前组件的switch分支中使用，还可能在其他场景复用，可以把<app-device>的逻辑封装成小型独立组件，比如device-section.component。

1. 创建子组件 #

// device-section.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-device-section',
  template: `
    <div>
      <app-device
        *ngIf="status"
        [statusInformation]="status"
      ></app-device>
      <app-device
        *ngIf="information"
        [statusInformation]="information"
      ></app-device>
    </div>
  `
})
export class DeviceSectionComponent {
  @Input() status: any;
  @Input() information: any;
}

2. 在父组件中使用 #

<div [ngSwitch]="currentCase">
  <div *ngSwitchCase="case1">
    <div>
      <div>
        <i>Icon 1</i>
      </div>
      <app-device-section 
        [status]="status"
        [information]="information"
      ></app-device-section>
    </div>
  </div>

  <div *ngSwitchCase="case2">
    <div>
      <div>
        <i>Icon 2</i>
      </div>
      <app-device-section 
        [status]="status"
        [information]="information"
      ></app-device-section>
    </div>
  </div>

  <div *ngSwitchCase="case3">
    <div>
      <div>
        <i>Icon 3</i>
      </div>
      <app-device-section 
        [status]="status"
        [information]="information"
      ></app-device-section>
    </div>
  </div>
</div>

方案3：重构ngSwitch结构，公共部分移到外层 #

如果每个switch分支的整体布局一致，仅局部内容（比如图标）不同，可以把公共布局结构提到switch外面，只让差异化部分参与switch判断：

<div>
  <div>
    <div>
      <!-- 仅差异化的图标部分用ngSwitch -->
      <ng-container [ngSwitch]="currentCase">
        <i *ngSwitchCase="case1">Icon 1</i>
        <i *ngSwitchCase="case2">Icon 2</i>
        <i *ngSwitchCase="case3">Icon 3</i>
      </ng-container>
    </div>
    <!-- 公共的app-device代码直接放在外层，无需重复 -->
    <div>
      <app-device
        *ngIf="status"
        [statusInformation]="status"
      ></app-device>
      <app-device
        *ngIf="information"
        [statusInformation]="information"
      ></app-device>
    </div>
  </div>
</div>

该方案最简洁，但仅适用于分支间布局结构高度一致的场景。

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