在 Angular 中使用 ngSwitch

在一般的编程语言中，你至少有一次听说并使用过 switch 语句。

当有许多 if 语句时，switch 语句用于执行代码块，我们将这些 if 语句转换为 switch 语句以节省时间并使其更有效地工作。

在本教程中，我们将通过一个示例来创建一个场景，以便根据星期几执行 switch 语句并显示星期几的特定代码块。

在 Angular 中如何使用 ngSwitch

让我们使用以下命令创建一个新应用程序。

# angular
ng new my-app

在 Angular 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。

# angular
cd my-app

现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。

# angular
ng serve --open

我们将使用以下命令创建一个新组件。

# angular
ng g c greeting

在 greeting.component.ts 中，我们将创建一个日期来存储一周中的当前日期。

# angular
day = new Date().getDay();

我们将创建一个 switch 语句，这样如果日期返回 0，它将是星期日，而 1 将是星期一，依此类推。所以我们将使用 [ngSwitch] 绑定 day 并使用 ngSwitchCase 在 greeting.component.html 中显示每天的不同视图。

<h1>Hello! Good Morning</h1>

<div [ngSwitch]="day">
  <div *ngSwitchCase="0">Today is Sunday! Have a nice weekend</div>
  <div *ngSwitchCase="1"><h3>Today is Monday, Have a nice day</h3></div>
  <div *ngSwitchCase="2"><h3>Today is Tuesday, Have a nice day</h3></div>
  <div *ngSwitchCase="3"><h3>Today is Wednesday, Have a nice day</h3></div>
  <div *ngSwitchCase="4"><h3>Today is Thursday, Have a nice day</h3></div>
  <div *ngSwitchCase="5"><h3>Today is Friday, Have a nice day</h3></div>
  <div *ngSwitchCase="6"><h3>Today is Saturday, Have a nice weekend</h3></div>
  <div *ngSwitchDefault>Uh oh! Somethings wrong</div>
</div>

输出：

上面的例子表明 ngSwitch 显示当天是星期六。因此，通过这种方式，使用 ngSwitch 和 ngSwitchCase，我们可以根据案例场景显示任何代码块。

此处演示