Pasar enumeraciones en plantillas de vista angular2

122

¿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: creado 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);
McLac
fuente
2
Mejor que las dos respuestas a continuación, aunque similar pero más simple que la aceptada, es: stackoverflow.com/a/42464835/358578
pbarranis

Respuestas:

131

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>
David L
fuente
2
Según su actualización, mueva su declaración de propiedad de enumeración al componente principal.
David L
Oh, claro, se extrae de su contexto.
McLac
8
Nuevamente, votante negativo, proporcione comentarios sobre cómo se puede mejorar esta respuesta si no está de acuerdo con ella.
David L
1
En caso de que alguien esté luchando para que funcione, tenga en cuenta que es "set dropdownType ()", no "setDropDownType ()" en el código anterior. Me tomó un tiempo ver eso. Sin embargo, también funciona con una variable miembro.
murrayc
2
Estoy bastante seguro dropdownTypede que la plantilla debe tener corchetes en ambos extremos (así :) [dropdownType]ya que toma una var y no un texto.
Tom
169

Crea una enumeración

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

Crear su componente, puede que su lista de enumeración tendrá el typeof

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>
Oswaldo Alvarez
fuente
4
Mejor solución que la aceptada. Supongo que usa alguna característica nueva de TS.
Greg Dan
2
Yo mismo no soy un especialista, así que tengo que preguntarme: ¿esta solución es siempre mejor que la de David L.? Este toma menos líneas de código, pero en términos de uso de memoria, puede estar creando una lista por instancia de la clase de componente del host ... Y si esto es cierto (¡no digo que lo sea!), No hay mucho problema cuando tratando con AppComponent, pero la solución podría no ser la mejor en el caso de un CustomerComponent o algo más recurrente. Estoy en lo cierto?
Rui Pimentel
2
Puede actualizar el html como: [class.active] = "active === ACTIVE_OPTIONS.HOME"
Neil
6
¿cómo y por qué es esto mejor que la solución aceptada @GregDan?
Aditya Vikas Devarapalli
1
Aditya, es mejor por la simple razón, que involucra una clase, no 2. No tengo una clase principal, y no la voy a crear por esa razón :)
Yuri Gridin
13

Si desea obtener el nombre de Enum:

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

luego en el archivo de componentes

public gender: typeof Gender = Gender;

en plantilla

<input [value]="gender.Man" />
Milad Jafari
fuente
2

Quizás no tengas 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 desea obtener el nombre de Enum:

val enumValue = DropdownType.currency
DropdownType[enumValue] //  print "currency", Even the "numeric enum" is also. 
Bin Zhan
fuente
1
Digamos que no doy ningún valor a la enumeración, si cambio el orden de la enumeración, el HTML será incorrecto. Creo que este no es un buen enfoque
André Roggeri Campos