在Angular 7中,你可以使用一个变量来追踪当前的状态,并在点击事件中循环更新该状态。下面是一个示例代码:
在组件的HTML模板中,使用ngSwitch指令根据状态来显示不同的内容:
在组件的TypeScript代码中,定义一个变量来保存当前状态,并创建一个方法来更新状态:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
currentState: string = 'state1';
changeState() {
if (this.currentState === 'state1') {
this.currentState = 'state2';
} else if (this.currentState === 'state2') {
this.currentState = 'state3';
} else {
this.currentState = 'state1';
}
}
}
这样,当你点击按钮时,状态会循环在state1、state2和state3之间切换。你可以根据自己的需求修改状态切换的逻辑。