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