Как использовать enum в компоненте Angular

Question

Проблема с глобальным состоянием в Angular-компонентах

Я использую Angular и столкнулся с проблемой управления глобальным состоянием (или "режимом") в своих компонентах. Я ищу более эффективный способ реализации данной задачи. Вот что я попытался сделать:

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

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

Идея заключается в том, что функции внутри AbcComponent могут управлять работой шаблона, просто устанавливая свойство state. Например:

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

Однако проблема в том, что определение enum не может находиться внутри структуры class. Если я перемещаю его за пределы class, то шаблон не сможет к нему обратиться в своем локальном контексте.

Существует ли другой способ реализовать данную логику?

P.S. Если это будет интересно, в данный момент у меня есть несколько булевых свойств, по одному для каждого состояния, например modeInit, modeView и так далее. Это работает, но выглядит громоздко, так как только одно из свойств должно быть true в любое время.

Answer 1

Вы можете определить перечисление State вне класса, возможно, в другом файле:

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

Затем вы можете назначить это перечисление публичному полю в классе:

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

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

Теперь вы можете использовать это публичное поле для обращения к перечислению в шаблоне:

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

Таким образом, вы сможете ссылаться на значения вашего перечисления в шаблонах Angular, что делает ваш код более понятным и поддерживаемым.

Answer 2

Вы можете определить метод или геттер и сравнить текущее значение вашего состояния с уже импортированным перечислением (enum). Вот пример:

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;
  }
}

В вашем шаблоне (template.html) вы можете использовать этот геттер следующим образом:

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

Таким образом, когда состояние вашего компонента будет равно State.view, в шаблоне отобразится сообщение "Oh is view!".

Answer 3

Вы также можете воспользоваться слиянием объявлений, чтобы сделать перечисление доступным как статический член компонента.

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

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

Затем вы можете обратиться к этому перечислению в шаблоне через поле constructor:

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

Таким образом, использование слияния объявлений позволяет вам организовать код более структурированно и сделать доступ к перечислениям более удобным.

Как использовать enum в компоненте Angular

3 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных