如何仅接受 Angular @Input 中的预定义值答案

【问题标题】：How to accept only predefined values in an Angular @Input如何仅接受 Angular @Input 中的预定义值
【发布时间】：2017-09-15 18:02:52
【问题描述】：

我的问题是我在 a 中接收到一个字符串值作为组件的参数，但我想限制可以用作参数的值，就像 enum 一样

我用

@Input() type: string = '';

但是在组件中，所有内容都可以引入type 属性，我需要将其限制为只有 3 个选项，就像我之前所说的那样，例如 Enum

【问题讨论】：

这取决于您所说的“限制”是什么意思，以及您希望在什么时候抛出警告/错误。一个简单的解决方案是检查组件上的值，如果它们无效则抛出异常。如果您正在寻找编译时解决方案，那么至少您需要在编译时将模板转换为脚本（即 AOT） - 在这种情况下，只需键入输入值即可 - 即使用 Typescript 来限制类型。

【解决方案1】：

试试这个：

@Input() type: 'acceptable1' | 'acceptable2' | 'acceptable3';

这使用允许任何列出的类型的打字稿联合类型。 a 或 b 或 c 等

或使用TS enum

【讨论】：

【解决方案2】：

创建一个Enum 并将input 的类型设置为枚举。如果它是枚举中的值之一，您的值将被传递，否则它将是undefined

enum MyEnum {
    First,
    Second,
    Third
}

@Input() type: MyEnum;

【讨论】：

我没有发现这在 Angular 7 中是正确的。我实现了这个，但我仍然能够传入 MyEnum 值之外的任何字符串。 type 变量不是未定义，而是使用传入的随机字符串填充...
刚找到这篇文章。它有助于澄清事情。 angularfirst.com/typescript-string-enums