Angular 17 @switch 多个值以防万一

Question

我有角度 17，我正在使用控制流。 我想使用@switch

示例：

@switch (variable) {
   @case ("sun")
   {
     //do something
   }
   @case ("sea")
   { 
   }
}

现在我有两个不同的变量值但做相同的事情，我该怎么做？有可能是这样的吗？ :

 @switch (variable) {
   @case ("sun","moon")
   {
     //do something
   }
   @case ("sea")
   { 
   }
}

解决方案或建议

Answer 1

当您将

switch

指定为

true

时，可以使用 javascript 数组方法

.includes

重写各个案例来检查多个值，这将实现您想要的！

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="value"/>
    @switch (true) {
      @case (["sun","moon"].includes(this.value))
      {
        <h1>sun or moon</h1>
      }
      @case (this.value === "sea")
      { 
     <h1>sea</h1>
      }
    }
  `,
})
export class App {
  value = 'moon';
}

bootstrapApplication(App);

Stackblitz 演示