Przekaż wyliczenia w szablonach widoków angular2


123

Czy możemy używać wyliczeń w szablonie widoku angular2?

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

przekazuje ciąg jako dane wejściowe:

enum DropdownType {
    instrument,
    account,
    currency
}

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

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

        console.log(value);
    };
}

Ale jak przekazać konfigurację wyliczenia? Chcę coś takiego w szablonie:

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

Jaka byłaby najlepsza praktyka?

Edytowano: utworzono przykład:

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
Lepsza niż obie poniższe odpowiedzi, choć podobna, ale prostsza od zaakceptowanej, to: stackoverflow.com/a/42464835/358578
pbarranis.

Odpowiedzi:


132

Utwórz właściwość wyliczenia w składniku nadrzędnym do klasy składnika i przypisz do niej wyliczenie, a następnie odwołaj się do tej właściwości w szablonie.

export class Parent {
    public dropdownTypes = DropdownType;        
}

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

Pozwala to wyliczyć wyliczenie zgodnie z oczekiwaniami w szablonie.

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

2
Na podstawie aktualizacji przenieś deklarację właściwości wyliczenia do składnika nadrzędnego.
David L

Och, oczywiście, wyciąga z kontekstu.
McLac,

8
Ponownie, przeciwnik, powiedz nam, jak można poprawić tę odpowiedź, jeśli się z nią nie zgadzasz.
David L

1
W przypadku, gdy ktoś stara się, aby to zadziałało, zwróć uwagę, że w powyższym kodzie jest to „set dropdownType ()”, a nie „setDropDownType ()”. Zajęło mi to trochę czasu. Działa również ze zmienną składową.
murrayc

2
Całkiem pewnie, że dropdownTypew szablonie powinny [dropdownType]znajdować się nawiasy kwadratowe na obu końcach (tak:), ponieważ przyjmuje zmienną, a nie tekst.
Tom

170

Utwórz wyliczenie

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

Utwórz swój komponent, upewnij się, że lista wyliczeń będzie miała typ typeof

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

Utwórz swój widok

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

4
Lepsze rozwiązanie niż przyjęte. Myślę, że wykorzystuje jakąś nową funkcję TS.
Greg Dan,

2
Sam nie jestem specjalistą, więc naprawdę muszę zapytać: czy to rozwiązanie jest zawsze lepsze niż rozwiązanie Davida L.? Ten zajmuje mniej linii kodu, ale jeśli chodzi o użycie pamięci, może tworzyć jedną listę na instancję klasy komponentu hosta ... A jeśli to prawda (nie mówiąc, że tak!), Nie ma większego problemu, gdy do czynienia z AppComponentem, ale rozwiązanie może nie być najlepsze w przypadku CustomerComponent lub czegoś bardziej powtarzalnego. Czy mam rację?
Rui Pimentel

2
Możesz zaktualizować kod HTML jako: [class.active] = "active === ACTIVE_OPTIONS.HOME"
Neil

6
jak i dlaczego jest to lepsze niż przyjęte rozwiązanie @GregDan?
Aditya Vikas Devarapalli

1
Aditya, jest lepiej z tego prostego powodu, że obejmuje jedną klasę, a nie 2. Nie mam klasy rodzicielskiej i nie zamierzam jej tworzyć z tego powodu :)
Yuri Gridin

13

Jeśli chcesz uzyskać nazwę Enum:

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

następnie w pliku komponentu

public gender: typeof Gender = Gender;

w szablonie

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

2

Może nie musisz tego robić.

Na przykład w Numeric Enum:

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

W szablonie HTML:

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

wynik: dropdownType == DropdownType.account

lub String Enum:

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

wynik: dropdownType == DropdownType.currency


Jeśli chcesz uzyskać nazwę Enum:

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

1
Powiedzmy, że nie podam wyliczenia żadnej wartości, jeśli zmienię kolejność wyliczeń, kod HTML będzie nieprawidłowy. Myślę, że to nie jest dobre podejście
André Roggeri Campos
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.