Angular10 NgSwitch 指令

在本文中，我们将了解 Angular 10 中的 NgSwitch 是什么以及如何使用它。

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

句法：

NgModule：NgSwitch使用的模块是：

• 通用模块

选择器：

• [NgSwitch]

指令：
• NgSwitchCase

方法：

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

例子：

app.component.ts

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;
}

app.component.html

  
One
  
Two
  
Three
  
Four
  
Five

输出：

参考： https://angular.io/api/common/NgSwitch