在 Angular 中使用 ngSwitch
Rana Hasnain Khan
2022年4月20日
在一般的编程语言中,你至少有一次听说并使用过 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
,我们可以根据案例场景显示任何代码块。
Author: Rana Hasnain Khan
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