时间戳

首页 > 解决方案 > 在多个状态之间切换

angular - 在多个状态之间切换

问题描述

我有一个看起来像这样的组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'myApp-component',
  templateUrl: './myApp.component.html',
  styleUrls: ['./myApp.component.scss']
})
export class MyApp implements OnInit {

  myState1: boolean;
  myState2: boolean;
  myState3: boolean;

  constructor() { }

  ngOnInit() {
  }
}

我的 HTML 看起来像这样：

<div (click)="myState1 = true; myState2 = false; myState3 = false">Button1</div>
<div (click)="myState2 = true; myState1 = false; myState3 = false">Button2</div>
<div (click)="myState3 = true; myState1 = false; myState2 = false">Button3</div>

所以基本上，当我点击一个时，另一个变成false等等，我可以true根据需要使用当前状态。因此，这并没有那么糟糕，但我想如果我得到三个以上的状态（我知道我会的），这最终会变得一团糟。

我如何使它更干净一点，这样我就可以拥有更多的状态，而不必担心 HTML 是一团糟？

标签： angular

解决方案

您可以使用仅存储在一个变量中的联合类型的字符串状态/状态。这样你就有了单一的事实来源，你只需要改变一个变量来改变状态。你可以很容易地检查状态。

...
type State = 'state1' | 'state2' | 'state3'

export class MyApp implements OnInit {

  state: State;

  constructor() { }

  ngOnInit() {
  }

  someFunction() {
    if (this.state === 'state1') // etc, or switch
  }
  
}

<div (click)="state = 'state1'">Button3</div>

推荐阅读