Übergeben Sie Aufzählungen in Angular2-Ansichtsvorlagen

Können wir Enums in einer Angular2-Ansichtsvorlage verwenden?

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

Übergibt die Zeichenfolge als Eingabe:

enum DropdownType {
    instrument,
    account,
    currency
}

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

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

        console.log(value);
    };
}

Aber wie übergebe ich eine Enum-Konfiguration? Ich möchte so etwas in der Vorlage:

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

Was wäre die beste Vorgehensweise?

Bearbeitet: Beispiel erstellt:

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

Erstellen Sie eine Eigenschaft für Ihre Aufzählung in der übergeordneten Komponente Ihrer Komponentenklasse, weisen Sie ihr die Aufzählung zu und verweisen Sie dann auf diese Eigenschaft in Ihrer Vorlage.

export class Parent {
    public dropdownTypes = DropdownType;        
}

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

Auf diese Weise können Sie die Aufzählung wie erwartet in Ihrer Vorlage auflisten.

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

Erstellen Sie eine Aufzählung

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

Erstellen Sie Ihre Komponente, und stellen Sie sicher, dass Ihre Aufzählungsliste den Typ enthält

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

Erstellen Sie Ihre Ansicht

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

Wenn Sie den Namen Enum erhalten möchten:

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

dann in der Komponentendatei

public gender: typeof Gender = Gender;

in Vorlage

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

Vielleicht musst du das nicht tun.

Zum Beispiel in Numeric Enum:

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

In der HTML-Vorlage:

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

Ergebnis: dropdownType == DropdownType.account

oder String Enum:

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

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

Ergebnis: dropdownType == DropdownType.currency

Wenn Sie den Namen Enum erhalten möchten:

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