Mis componentes angulares tienden a tener un estado global (o "modo"), por lo que estoy buscando una manera de codificar esto de manera eficiente. Lo que traté de hacer es esto:
@Component({ .... }) export class AbcComponent implements OnInit { enum State { init, view, edit, create, wait } state: State = State.init;La idea es que las funciones dentro de AbcComponent puedan impulsar la operación de la plantilla simplemente configurando la propiedad de estado . Por ejemplo:
<div class="col" *ngIf="state === State.view"> ... </div>El problema es que la definición de enumeración no puede aparecer dentro de la estructura de clase . Y luego, si lo muevo fuera de la estructura de clases , la plantilla no lo tiene dentro de su alcance local.
¿Hay una manera diferente de hacer esto?
PD: si tiene algún interés, lo que he estado haciendo es que tengo varias propiedades booleanas , una para cada estado. Por ejemplo , modeInit modeView, etc. Funciona pero es complicado porque solo uno debe ser verdadero a la vez.
Puede definir la enumeración State fuera de la clase, posiblemente en otro archivo:
export enum State { init, view, edit, create, wait }y asigne la enumeración a un campo público en la clase:
import { State } from "../models/app-enums.model"; @Component({ .... }) export class AbcComponent implements OnInit { public StateEnum = State; public state = State.init; ... }Ese campo público se puede usar para hacer referencia a la enumeración en la plantilla:
<div class="col" *ngIf="state === StateEnum.view"> ... </div>Puede definir un método o captador y comparar su valor de estado actual con la enumeración ya importada. Me gusta esto:
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; } }plantilla.html
<div *ngIf="isView">Oh is view!</div>También puede utilizar la combinación de declaraciones para que la enumeración esté disponible como miembro estático del componente.
@Component({ .... }) export class AbcComponent implements OnInit { state = AbcComponent.State.init; } export namespace AbcComponent { export enum State { init, view, edit, create, wait } } y luego acceda a él en la plantilla desde el campo constructor
<div class="col" *ngIf="state === constructor.State.view"> ... </div>