Question

我有一个自定义的Angular 4组件，并希望将输入属性限制为有效的TypeScript枚举值。我看到this question似乎相同，但我似乎无法得到工作的接受答案，因为我预期它会起作用。

这是我的组件：

import { Component, Input } from '@angular/core';

enum MyEnum {
  ValueInMyEnum,
  One,
  Two,
  Three
}

@Component({
  selector: 'my-component',
  template: `
    <div>
      <div>Prop1 value: {{ prop1 }}</div>
      <div>Prop2 value: {{ prop2 }}</div>
      <div>Prop3 value: {{ prop3 }}</div>
      <div>Prop4 value: {{ prop4 }}</div>
      <div>Prop5 value: {{ prop5 }}</div>
      <div>Prop6 value: {{ prop6 }}</div>
    </div>
  `
})
export class MyComponent {
  @Input() prop1: MyEnum;
  @Input() prop2: MyEnum;
  @Input() prop3: string
  @Input() prop4: MyEnum;
  @Input() prop5: MyEnum;
  @Input() prop6: string

}

以下是我使用我的组件的方式：

<my-component 
      prop1="ValueInMyEnum"
      prop2="ValueNotInMyEnum"
      prop3="Prop3IsJustAStringType"
      [prop4]="ValueInMyEnum"
      [prop5]="ValueNotInMyEnum"
      [prop6]="Prop6IsJustAStringType"
></my-component>

我希望能够提供枚举中的值，并且能够在组件代码中将其值用作MyEnum类型，但似乎所有内容都未定义。如何正确地为组件提供枚举值？

这是一个plunk来帮助演示这个。

Answer 1

在你的app.ts导入MyEnum并使用辅助变量

....
import { MyComponent,MyEnum } from './my-component';
....
export class App {
    IEnum=MyEnum; //<--add the variable
    constructor() {...}

然后你可以写

<my-component [prop4]="IEnum.ValueInMyEnum"></my-component>

如何限制Angular自定义输入控件中的输入属性值？

1 个答案: