Web前端►框架►Angular

Angular中的条件渲染

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/29/Angular%E4%B8%AD%E7%9A%84%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93/

摘要

本文主要讲述了：

  1. ngIf指令
  2. ngSwitch指令

正文

注意：

  1. 如果要在子模块的组件中使用ngIf和ngSwitch指令，需要引用@angular/common中的CommonModule
  2. Angular 中并没有像 Vue 那样的v-show指令

示例：

my-angular/src/app/modules/register/register.module.ts

1
2
3
4
5
6
7
8
9
10
11
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { RegisterRoutingModule } from './register-routing.module';
import { ResetPasswordComponent } from './pages/reset-password/reset-password.component';

@NgModule({
  declarations: [ResetPasswordComponent],
  imports: [CommonModule, RegisterRoutingModule],
})
export class RegisterModule {}

ngIf指令

示例：

输入：

my-angular/src/app/app.component.html

1
2
3
4
5
6
7
<div *ngIf="foo; then thenBlock; else elseBlock"></div>
<ng-template #thenBlock>
  <div>I'm happy!</div>
</ng-template>
<ng-template #elseBlock>
  <div>I'm not happy!</div>
</ng-template>

或

1
2
3
4
<div *ngIf="foo; else elseBlock">I'm happy!</div>
<ng-template #elseBlock>
  <div>I'm not happy!</div>
</ng-template>

my-angular/src/app/app.component.ts

1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  foo = false;
}

输出：

1
2
3
<app-root>
  <div>I'm not happy!</div>
</app-root>

ngSwitch指令

ngSwitch指令用于绑定 condition，ngSwitchCase指令用于绑定 case，ngSwitchDefault指令用于绑定 default

注意：和 JavaScript 中switch...case语句使用严格相等所不同的是，Angular 使用抽象相等

示例：0和空字符串抽象相等

输入：

my-angular/src/app/app.component.html

1
2
3
4
5
6
<div [ngSwitch]="foo">
  <div *ngSwitchCase="0">0</div>
  <div *ngSwitchCase="1">1</div>
  <div *ngSwitchCase="2">2</div>
  <div *ngSwitchDefault>3</div>
</div>

my-angular/src/app/app.component.ts

1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  foo = '';
}

输出：

1
2
3
4
5
<app-root>
  <div>
    <div>0</div>
  </div>
</app-root>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/29/Angular%E4%B8%AD%E7%9A%84%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93/

本文对你有帮助？请支持我

支付宝
微信