网站首页 » 前端开发 » Angular 2+ » Angular 4.x NgSwitch 指令用法
上一篇:
下一篇:

Angular 4.x NgSwitch 指令用法

基本用法

下面是官方给出的基本套路,看完估计该懂的都应该懂了,不懂的联想一下也应该懂得差不多了。

用法
<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <ng-container *ngSwitchCase="match_expression_3">
    <!-- use a ng-container to group multiple root nodes -->
    <inner-element></inner-element>
    <inner-other-element></inner-other-element>
  </ng-container>
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

ngSwitch 跟我们平时在源生的 JavaScript 中的 switch 用法非常的相似,*ngSwitchCase 就是当符合条件后就会显示对应的内容,而当前面的所有 ngSwitchCase 的情况都没有匹配到的时候就默认显示最后一个 *ngSwitchDefault 的内容。

示例

如果你还没看懂上面官方给出的套路,那么你还可以看看下面这个更加易懂的例子:

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  title = 'Angular 4.x NgSwitch';
  private num = 0;
  changeElement(): void {
    if (this.num > 3) {
      this.num = 0;
    }
    this.num++;
  }
}
app.component.html
<div>
  <h1>{{title}}</h1>
  <div>
    <div [ngSwitch]="num">
      <div *ngSwitchCase="0">ngSwitchCase 0</div>
      <div *ngSwitchCase="1">ngSwitchCase 1</div>
      <div *ngSwitchCase="2">ngSwitchCase 2</div>
      <div *ngSwitchCase="3">ngSwitchCase 3</div>
      <div *ngSwitchDefault>ngSwitchCase Default</div>
    </div>
  </div>
  <button (click)="changeElement()">Swicth</button>
</div>

运行一下代码效果更佳哦!

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-api-ngswitch/

评论1
  1. 2017年9月26日 下午1:27 回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END