typescript - Hvordan bruke en enum i en Angular-komponent

Mine Angular-komponenter har en tendens til å ha en global tilstand (eller "modus"), så jeg ser etter en måte å kode dette effektivt på. Det jeg prøvde å gjøre er dette:

@Component({
      ....
})
export class AbcComponent implements OnInit {

  enum State {
    init, view, edit, create, wait
  }
  state: State = State.init;

Ideen er at funksjonene inne i AbcComponent kan styre malens operasjon bare ved å sette state-egenskapen. For eksempel:

<div class="col" *ngIf="state === State.view"> ... </div>

Problemet er at enum-definisjonen ikke kan vises inne i class-strukturen. Og hvis jeg flytter den utenfor class-strukturen, har ikke templaten den innenfor sitt lokale område.

Er det en annen måte å gjøre dette på?

P.S. Hvis det er av noen interesse, det jeg har gjort er at jeg har flere boolske egenskaper, én for hver tilstand. For eksempel modeInit modeView osv. Det fungerer, men det er klønete fordi bare én skal være true om gangen.

Svar #1

Du kan definere State-enumen utenfor klassen, eventuelt i en annen fil:

export enum State {
  init, 
  view, 
  edit, 
  create, 
  wait
}

og tilordne enumen til et offentlig felt i klassen:

import { State } from "../models/app-enums.model";

@Component({
  ....
})
export class AbcComponent implements OnInit {
  public StateEnum = State;
  public state = State.init;
  ...
}

Det offentlige feltet kan deretter brukes til å referere til enumen i malen:

<div class="col" *ngIf="state === StateEnum.view"> ... </div>

Svar #2

Du kan definere en metode eller getter og sammenligne din nåværende tilstandsverdi med enumen som allerede er importert. Slik:

import { State } from "../models/state-enum.ts";

@Component({
  ....
})
export class AbcComponent implements OnInit {
  private state: State = State.init;
  ...
  get isView() {
    return this.state === State.view;
  }
}

mal.html

<div *ngIf="isView">Oh is view!</div>

Relaterte artikler