Passe enums em modelos de visualização angular2


123

Podemos usar enums em um modelo de visualização angular2?

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

passa a string como entrada:

enum DropdownType {
    instrument,
    account,
    currency
}

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

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

        console.log(value);
    };
}

Mas como passar uma configuração de enum? Eu quero algo assim no modelo:

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

Qual seria a melhor prática?

Editado: Criado um exemplo:

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

2
Melhor do que as duas respostas abaixo, embora semelhante, mas mais simples do que a aceita, é: stackoverflow.com/a/42464835/358578
pbarranis

Respostas:


132

Crie uma propriedade para seu enum no componente pai de sua classe de componente e atribua o enum a ela e, em seguida, faça referência a essa propriedade em seu modelo.

export class Parent {
    public dropdownTypes = DropdownType;        
}

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

Isso permite enumerar o enum conforme esperado em seu modelo.

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

2
Com base em sua atualização, mova sua declaração de propriedade enum para o componente pai.
David L

Oh, claro, vem de seu contexto.
McLac

8
Novamente, downvoter, forneça feedback sobre como esta resposta pode ser melhorada se você discordar dela.
David L

1
Caso alguém esteja lutando para fazer isso funcionar, observe que é "set dropdownType ()", não "setDropDownType ()" no código acima. Levei um tempo para ver isso. Ele também funciona com uma variável de membro.
murrayc

2
Com certeza dropdownType, o modelo deve ter colchetes em ambas as extremidades (como [dropdownType]:), uma vez que leva uma var e não um texto.
Tom

170

Crie um enum

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

Crie seu componente, certifique-se de que sua lista enum terá o tipo de

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

Crie a sua vista

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

4
Solução melhor do que a aceita. Acho que usa algum novo recurso do TS.
Greg Dan

2
Não sou um especialista, então realmente tenho que questionar: essa solução é sempre melhor do que a de David L.? Este leva menos linhas de código, mas em termos de uso de memória, pode-se criar uma lista por instância da classe de componente host ... E se isso for verdade (não estou dizendo que é!), Não há muito problema quando lidar com AppComponent, mas a solução pode não ser a melhor no caso de um CustomerComponent ou algo mais recorrente. Estou certo?
Rui Pimentel

2
Você pode atualizar o html como: [class.active] = "active === ACTIVE_OPTIONS.HOME"
Neil

6
como e por que isso é melhor do que a solução aceita @GregDan?
Aditya Vikas Devarapalli

1
Aditya, é melhor pela simples razão de que envolve uma classe, não 2. Eu não tenho uma classe pai, e não vou criá-la por esse motivo :)
Yuri Gridin

13

Se você deseja obter o nome Enum:

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

então em arquivo de componente

public gender: typeof Gender = Gender;

no modelo

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

2

Talvez você não precise fazer isso.

Por exemplo, em Numeric Enum:

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

No modelo HTML:

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

resultado: dropdownType == DropdownType.account

ou String Enum:

export enum DropdownType {
    instrument = "instrument",
    account = "account",
    currency = "currency"
}
<div class="Dropdown" [dropdownType]="'currency'"></div>

resultado: dropdownType == DropdownType.currency


Se você deseja obter o nome Enum:

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

1
Digamos que eu não forneça nenhum valor ao enum; se eu alterar a ordem do enum, o HTML ficará errado. Acho que essa não é uma boa abordagem
André Roggeri Campos 02/01
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.