Передайте перечисления в шаблонах представления angular2

Question

Можем ли мы использовать перечисления в шаблоне представления angular2?

    <div class="Dropdown" dropdownType="instrument"></div>

передает строку в качестве ввода:

    enum DropdownType {
        instrument,
        account,
        currency
    }

    @Component({
        selector: '[.Dropdown]',
    })
    export class Dropdown {

        @Input() public set dropdownType(value: any) {

            console.log(value);
        };
    }

Но как передать конфигурацию enum? Я хочу что-то подобное в шаблоне:

    <div class="Dropdown" dropdownType="DropdownType.instrument"></div>

Какова будет лучшая практика?

Отредактировано: Создан пример:

    import {bootstrap} from 'angular2/platform/browser';
    import {Component, View, Input} from 'angular2/core';

    export enum DropdownType {

        instrument = 0,
        account = 1,
        currency = 2
    }

    @Component({selector: '[.Dropdown]',})
    @View({template: ''})
    export class Dropdown {

        public dropdownTypes = DropdownType;

        @Input() public set dropdownType(value: any) {console.log(`-- dropdownType: ${value}`);};
        constructor() {console.log('-- Dropdown ready --');}
    }

    @Component({ selector: 'header' })
    @View({ template: '<div class="Dropdown" dropdownType="dropdownTypes.instrument"> </div>', directives: [Dropdown] })
    class Header {}

    @Component({ selector: 'my-app' })
    @View({ template: '<header></header>', directives: [Header] })
    class Tester {}

    bootstrap(Tester);

Answer 1

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

export class Parent {
    public dropdownTypes = DropdownType;        
}

export class Dropdown {       
    @Input() public set dropdownType(value: any) {
        console.log(value);
    };
}

Это позволяет вам перечислить перечисление, как ожидается в вашем шаблоне.

<div class="Dropdown" dropdownType="dropdownTypes.instrument"></div>

Answer 2

Здесь решение.

Создать перечисление

enum ACTIVE_OPTIONS {
    HOME = 0,
    USERS = 1,
    PLAYERS = 2
}

Создайте свой компонент, убедитесь, что ваш список перечислений будет иметь typeof

export class AppComponent {
   ACTIVE_OPTIONS: typeof ACTIVE_OPTIONS = ACTIVE_OPTIONS;
   active:ACTIVE_OPTIONS;
}

Создайте свой вид

<li [ngClass]="{'active':active==ACTIVE_OPTIONS.HOME}">
   <a router-link="/in">
    <i class="fa fa-fw fa-dashboard"></i> Home
   </a>
</li>

НАСЛАЖДАТЬСЯ

Answer 3

Если вы хотите получить имя Enum:

export enum Gender {
       Man = 1,
       Woman = 2
   }

затем в файле компонента

public gender: typeof Gender = Gender;

в шаблоне

<input [value]="gender.Man" />

Answer 4

Может быть, вам не нужно это делать.

Например, в Numeric Enum:

export enum DropdownType {
    instrument = 0,
    account = 1,
    currency = 2
}

В шаблоне HTML:

<div class="Dropdown" [dropdownType]="1"></div>

результат:dropdownType == DropdownType.account

или String Enum:

export enum DropdownType {
    instrument = "instrument",
    account = "account",
    currency = "currency"
}

<div class="Dropdown" [dropdownType]="'currency'"></div>

результат:dropdownType == DropdownType.currency

---

Если вы хотите получить имя Enum:

val enumValue = DropdownType.currency
DropdownType[enumValue] //  print "currency", Even the "numeric enum" is also. 

Answer 5

Я немного опаздываю на вечеринку.

Вы можете использовать...set (value: keyof DropdownType)...

Таким образом, функция может быть вызвана только с помощью ключа из перечисления.

После этого вам просто нужно преобразовать строковое значение в значение перечисления. Это невозможно напрямую в TypeScript, но мы можем использовать обходной путь:

Перечисление в TS будет скомпилировано в

      var DropdownType = {
    instrument = 0,
    account = 1,
    currency = 2
};

Object.freeze(DropdownType);

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

      @Input() public set dropdownType(value: keyof DropdownType) {
    const enumValue = (DropdownType as any)[value] as DropdownType;
    console.log(enumValue);
};

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

Кроме того, автодополнение будет работать только в том случае, если ваша IDE достаточно умна для этого. Моя рабочая область VSCode не поддерживает автозаполнение, но WebStorm делает это.

Редактировать:

Если вы чаще используете перечисления таким образом, я бы предложил создать статическую вспомогательную функцию где-нибудь в проекте:

      function getValueFromEnum<T extends {[key: string]: string | number}>(
    e: T, 
    key: keyof T
) {
    return e[key];
}