3 Angular-系统指令、自定义指令ngSwitch-ngSwitchCase

1 代码结构

 

 

2 myc02.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myc02',
  templateUrl: './myc02.component.html',
  styleUrls: ['./myc02.component.css']
})
export class Myc02Component implements OnInit {
  type = 1;
  constructor() { }

  ngOnInit(): void {
  }

}

3 myc02.component.html

<p>myc02 works!</p>

<h3>会员类型：{{type}}</h3>
<button (click)="type=type+1">升级会员</button>
<!--1：普通会员；2：白金会员；3：黄金会员；4：钻石会员-->
<span [ngSwitch]="type">
    <p *ngSwitchCase="1">
        欢迎，普通会员
    </p>
    <p *ngSwitchCase="2">
        欢迎，白金会员
    </p>
    <p *ngSwitchCase="3">
        欢迎，黄金会员
    </p>
    <p *ngSwitchCase="4">
        欢迎，钻石会员
    </p>
    <p *ngSwitchDefault>
        会员等级未知！
    </p>
</span>

4 效果图