在 Angular 中使用 ngSwitch

Rana Hasnain Khan 2022年4月20日
在 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 并使用 ngSwitchCasegreeting.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 Angular 示例

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

此处演示

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn