Angular10 NgSwitch指令

在这篇文章中，我们将看到Angular 10中的NgSwitch是什么以及如何使用它。

Angular10中的NgSwitch是用来指定显示或隐藏子元素的条件。

语法:

<li *NgSwitch='condition'></li>

NgModule: NgSwitch使用的模块是。

CommonModule

Selectors:

[NgSwitch]

Directives:
* NgSwitchCase

步骤:

创建要使用的angular应用程序
使用NgSwitch不需要任何导入。
在app.component.ts中定义一个变量
在app.component.html中，在有条件检查的元素中使用NgSwitch和NgSwitchCase指令。
使用ng serve为angular应用程序提供服务，以查看输出。

示例:

import { Component, Inject } 
from '@angular/core';
import { PLATFORM_ID } 
from '@angular/core';
import { isPlatformWorkerApp } 
from '@angular/common';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  num = 2;
}

<div [ngSwitch]="num">
  <div *ngSwitchCase="'1'">One</div>
  <div *ngSwitchCase="'2'">Two</div>
  <div *ngSwitchCase="'3'">Three</div>
  <div *ngSwitchCase="'4'">Four</div>
  <div *ngSwitchCase="'5'">Five</div>
</div>

输出:

Angular10 NgSwitch指令