如何在角度模板中传递枚举值作为输入？

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 个枚举属性，我们最终创建 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>