如何在angular模板中传递枚举值作为输入?

Question

我有一个以type作为输入的子组件
子组件:

export enum PersonTypes {
MALE = 'male',
FEMALE = 'female'
}
@Component({
selector: 'app-child'
})
export class ChildComponent {
@Input() type: PersonTypes;
}

父组件:

@Component({
selector: 'app-parent'
})
export class ParentComponent {
}

在父组件视图模板中:

<div>
<app-child [type]="PersonTypes.MALE"></app-child>
<app-child [type]="PersonTypes.FEMALE"></app-child>
</div>

那么，问题是如何在模板中传递不同的枚举值?我找到了一个答案，说我们需要在父组件中创建一个新变量，然后将该值赋给type。在如下模板中:

@Component({
selector: 'app-parent',
template:` <div>
<app-child [type]="malePerson"></app-child>
<app-child [type]="femalePerson"></app-child>
</div>  `
})
export class ParentComponent {
malePerson = PersonTypes.MALE;
femalePerson = PersonTypes.FEMALE;
}

对我来说，这是一个解决方案，如果我们有10个enum属性，我们最终会创建10个局部变量，在模板中分配它们太多了。

有更好的解决方案吗?

Answer 1

要在模板中使用Enum，你只需要直接将Enum赋值给组件的公共属性。

@Component({
selector: 'app-parent'
})
export class ParentComponent {
public PersonTypesEnum = PersonTypes; // direct reference 
}

现在PersonTypesEnum可以在模板中使用了

<div>
<app-child [type]="PersonTypesEnum.MALE"></app-child>
<app-child [type]="PersonTypesEnum.FEMALE"></app-child>
</div>