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);
답변
상위 구성 요소의 열거 형 속성을 구성 요소 클래스에 만들고 열거 형을 할당 한 다음 템플릿에서 해당 속성을 참조합니다.
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>
답변
열거 형 만들기
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>
답변
Enum 이름을 얻으려면 :
export enum Gender {
Man = 1,
Woman = 2
}
그런 다음 구성 요소 파일에서
public gender: typeof Gender = Gender;
템플릿에서
<input [value]="gender.Man" />
답변
아마 당신은 이것을 할 필요가 없습니다.
예를 들어 Numeric Enum에서 :
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.