enums - enum typescript angular

Pase enumeraciones en plantillas de vista angular2

Question

¿Podemos usar enumeraciones en una plantilla de vista angular2?

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

pasa la cadena como entrada:

enum DropdownType {
instrument,
account,
currency
}
@Component({
selector: ''[.Dropdown]'',
})
export class Dropdown {
@Input() public set dropdownType(value: any) {
console.log(value);
};
}

Pero, ¿cómo pasar una configuración de enumeración? Quiero algo como esto en la plantilla:

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

¿Cuál sería la mejor práctica?

Editado: creó un ejemplo:

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

Crea una enumeración

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

Cree su componente, asegúrese de que su lista de enumeraciones tenga el tipo de

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

Crea tu vista

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

Answer 2

Cree una propiedad para su enumeración en el componente principal a su clase de componente y asígnele la enumeración, luego haga referencia a esa propiedad en su plantilla.

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

Esto le permite enumerar la enumeración como se esperaba en su plantilla.

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

Answer 3

Tal vez no tienes que hacer esto.

Por ejemplo, en Numeric Enum:

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

En plantilla HTML:

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

resultado: dropdownType == DropdownType.account

o String Enum:

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

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

resultado: dropdownType == DropdownType.currency

Si quieres obtener el nombre de Enum:

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