列挙型をangular2ビューテンプレートに渡す


122

angular2ビューテンプレートで列挙型を使用できますか?

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

文字列を入力として渡します。

enum DropdownType {
    instrument,
    account,
    currency
}

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

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

        console.log(value);
    };
}

しかし、列挙型構成を渡す方法は?テンプレートに次のようなものが欲しい:

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

ベストプラクティスは何でしょうか?

編集:サンプルを作成:

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
下の回答の両方よりも良いが、似ていますが、受け入れられたものよりも単純かかわらず、次のとおりです。stackoverflow.com/a/42464835/358578は
pbarranis

回答:


131

親コンポーネントの列挙型のプロパティをコンポーネントクラスに作成し、列挙型をそれに割り当て、テンプレートでそのプロパティを参照します。

export class Parent {
    public dropdownTypes = DropdownType;        
}

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

これにより、テンプレートで期待どおりに列挙型を列挙できます。

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

2
更新に基づいて、列挙型プロパティ宣言を親コンポーネントに移動します。
David L

ああ、確かに、そのコンテキストから取得します。
McLac 2016年

8
繰り返しますが、反対意見の場合は、この回答を改善する方法についてフィードバックをお寄せください。
David L

1
誰かがそれを機能させるのに苦労している場合、それは上のコードの「setDropDownType()」ではなく「set dropdownType()」であることに注意してください。それを見るのにしばらく時間がかかりました。メンバー変数でも機能します。
murrayc 2017

2
かなり確信dropdownType:テンプレートに(そのような両端の角括弧を持っている必要があり[dropdownType]、それはvarとないテキストを要するため)。
トム

169

列挙型を作成する

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

コンポーネントを作成します。列挙リストにtypeof

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

ビューを作成する

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

4
受け入れられているソリューションよりも優れたソリューション。私はそれがいくつかの新しいTS機能を使用していると思います。
Greg Dan

2
私自身はスペシャリストではないので、私は本当に質問する必要があります。このソリューションは常にDavid L.のソリューションよりも優れていますか?これはコードの行数が少なくて済みますが、メモリ使用量の観点から、ホストコンポーネントクラスのインスタンスごとに1つのリストを作成している可能性があります。 AppComponentを処理しますが、CustomerComponentまたはそれ以上の繰り返しの場合、ソリューションは最適ではない可能性があります。私は正しいですか?
Rui Pimentel 2017年

2
次のようにHTMLを更新できます:[class.active] = "active === ACTIVE_OPTIONS.HOME"
Neil

6
これはどのようにそしてなぜこれが受け入れられたソリューション@GregDanより優れているのですか
Aditya Vikas Devarapalli

1
Aditya、2つのクラスではなく、1つのクラスが関係しているという単純な理由で優れています。私には親クラスがなく、その理由でそれを作成しません:)
Yuri Gridin

13

Enum名を取得したい場合:

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

次にコンポーネントファイルに

public gender: typeof Gender = Gender;

テンプレート内

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

2

多分これをする必要はありません。

たとえば、数値列挙では:

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

HTMLテンプレート:

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

結果: dropdownType == DropdownType.account

または文字列列挙:

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

結果: dropdownType == DropdownType.currency


Enum名を取得したい場合:

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

1
列挙型の順序を変更すると、HTMLが間違っているため、列挙型に値を指定しないとしましょう。私はこれは良いアプローチではないと思う
アンドレRoggeriカンポス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.