☰

Angular2ビューテンプレートで列挙型を渡す 質問する

tag-icon • tag-icon enums angular angular2-template
Angular2ビューテンプレートで列挙型を渡す 質問する

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

しかし、enum 構成を渡すにはどうすればよいのでしょうか? テンプレートでは次のようなものが必要です:

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

ベストアンサー1

を作成しますEnum:

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

コンポーネントを作成し、列挙リストに次の内容が含まれていることを確認します。型:

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

テンプレートを作成します。

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

おすすめ記事