使用 Angular 的 @switch() 为多个 @case 共享一个模板？

Question

七年前，这个问题已经被问过 Angular 的旧

ngSwitch

/

*ngSwitchCase

语法。将我们的模板更新为漂亮的新语法后，我再次遇到了同样的问题：在多个案例共享相同 UI 的情况下，避免重复部分的最佳方法是什么？

Angular 文档声明

@switch

不支持fallthrough（我认为这是一个很好的选择，可以避免所有缺少中断的错误）。但据我所知，他们没有添加一些东西来为单个

@case

提供选项列表？

那么唯一的方法就是使用

<ng-template>

？例如

  @switch (type) {
    @case ('type1') { ... }
    <ng-template #shared>Some UI shared for several cases</ng-template>
    @case ('type2') { <ng-container *ngTemplateOutlet="shared"/> }
    @case ('type3') { <ng-container *ngTemplateOutlet="shared"/> }
    @case ('type4') { ... }

或者，在里面使用

@default

和

@if

？不确定哪种方式更好理解和维护。

Answer 1

我们可以使用经典的

switch(true)

后跟带有多个检查的条件，以支持在一个

case

块中检查两种场景，我希望这就是您正在寻找的。

如果我们将 switch 设置为 true，它会让我们不进行严格的字符串检查，因此对于每种情况，我们可以链接像

@case (type === 'type2' || type === 'type3') { <ng-container *ngTemplateOutlet="shared"/> }

这样的条件并启用代码可重用性。请参阅下面的工作示例！

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    @switch (true) {
    @case (type === 'type1') { <h1>Hi Type 1</h1> }
    @case (type === 'type2' || type === 'type3') { <ng-container *ngTemplateOutlet="shared"/> }
    @case (type === 'type4') { <h1>Hi Type 4</h1> }
    }

    <ng-template #shared><h1>Some UI shared for several cases (Type 2 or Type3)</h1></ng-template>
  <hr/>
  <br/>
    <button (click)="type = 'type1'">set type1</button>
    <button (click)="type = 'type2'">set type2</button>
    <button (click)="type = 'type3'">set type3</button>
    <button (click)="type = 'type4'">set type4</button>
  `,
})
export class App {
  type = 'type2';
}

bootstrapApplication(App);

堆栈闪电战