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 效果圖