Angular新语法@switch如何为多个@case共享模板？

Angular新的@switch语法确实不支持单个@case匹配多个值，也刻意取消了贯穿逻辑（避免遗漏break引发的错误）。要实现多个case共享同一UI，目前有两种实用方案，各有优劣：

方案一：用<ng-template>复用共享UI #

这是最直观且易维护的方式，把共享UI抽成独立模板，在需要的@case里通过*ngTemplateOutlet引用：

@switch (type) {
  @case ('type1') { 
    <!-- type1专属UI -->
  }
  <ng-template #sharedUI>
    <!-- 多个case共享的UI内容 -->
    Some UI shared for several cases
  </ng-template>
  @case ('type2') { 
    <ng-container *ngTemplateOutlet="sharedUI"/>
  }
  @case ('type3') { 
    <ng-container *ngTemplateOutlet="sharedUI"/>
  }
  @case ('type4') { 
    <!-- type4专属UI -->
  }
  @default {
    <!-- 默认UI -->
  }
}

优势：

• 共享UI集中定义，修改时只需改一处，维护成本低
• 每个@case的职责清晰，一眼就能看出哪些case复用了同一逻辑
• 适合共享UI复杂、后续可能需要扩展或修改的场景

方案二：@default配合内部@if #

如果共享的case数量不多，且默认分支没有太多额外逻辑，可以把共享UI放到@default里，再用@if判断匹配的case值：

@switch (type) {
  @case ('type1') { 
    <!-- type1专属UI -->
  }
  @case ('type4') { 
    <!-- type4专属UI -->
  }
  @default {
    @if (['type2', 'type3'].includes(type)) {
      <!-- 多个case共享的UI内容 -->
      Some UI shared for several cases
    } @else {
      <!-- 其他默认情况的UI -->
    }
  }
}

优势：

• 无需额外定义模板，代码更紧凑
• 适合共享UI简单、且共享case值较少的场景

注意：如果@default分支本身还有其他逻辑，这种写法会让代码可读性下降，不建议使用。

总结 #

• 共享UI复杂、需要长期维护 → 优先选<ng-template>复用方案
• 共享UI简单、共享case少 → 可以用@default + @if的简洁写法

内容的提问来源于stack exchange，提问作者Peter T.