¿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);Crear una Enum :
enum ACTIVE_OPTIONS { HOME = 0, USERS = 1, PLAYERS = 2 }Cree un componente, asegúrese de que su lista de enumeración tenga el tipo de:
export class AppComponent { ACTIVE_OPTIONS = ACTIVE_OPTIONS; active: ACTIVE_OPTIONS; }Crear una plantilla:
<li [ngClass]="{ 'active': active === ACTIVE_OPTIONS.HOME }"> <a routerLink="/in"> <i class="fa fa-fw fa-dashboard"></i> Home </a> </li>Cree una propiedad para su enumeración en el componente principal de 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>Si quieres obtener el nombre Enum:
export enum Gender { Man = 1, Woman = 2 }luego en el archivo componente
public gender: typeof Gender = Gender;en plantilla
<input [value]="gender.Man" />