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 <!--1：普通会员；2：白金会员；3：黄金会员；4：钻石会员-->
 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 效果图