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

1 代码结构

2 myc02.component.ts

 1 import { Component, OnInit } from '@angular/core';
 2 
 3 @Component({
 4   selector: 'app-myc02',
 5   templateUrl: './myc02.component.html',
 6   styleUrls: ['./myc02.component.css']
 7 })
 8 export class Myc02Component implements OnInit {
 9   type = 1;
10   constructor() { }
11 
12   ngOnInit(): void {
13   }
14 
15 }

3 myc02.component.html

 1 <p>myc02 works!p>
 2 
 3 <h3>会员类型：{{type}}h3>
 4 <button (click)="type=type+1">升级会员button>
 5 
 6 <span [ngSwitch]="type">
 7     <p *ngSwitchCase="1">
 8         欢迎，普通会员
 9     p>
10     <p *ngSwitchCase="2">
11         欢迎，白金会员
12     p>
13     <p *ngSwitchCase="3">
14         欢迎，黄金会员
15     p>
16     <p *ngSwitchCase="4">
17         欢迎，钻石会员
18     p>
19     <p *ngSwitchDefault>
20         会员等级未知！
21     p>
22 span>

4 效果图