angular - 使用自定义类型 Angular 验证输入

Question

我有一个组件，其输入定义为自定义类型。

@Input() public labelSize: 'small' | 'normal' | 'large'  = 'normal';

但显然我可以将任何类型的参数传递给组件标签。我永远不会有任何错误/警告。

<my-component labelSize="whatever"></my-component>

我可以事件传递一个数字

<my-component labelSize=12345></my-component>

我希望 typescript 编译器或 Angular 能给我一些关于这种错误的反馈。

我应该自己验证我组件的所有输入的类型吗？

有什么最佳做法吗？

谢谢

Answer 1

angular 模板是 HTML，并没有以任何方式连接到 typescript 来检查它。甚至在 typescript 中也允许绕过类型声明，例如this.labelSize = 'whatever' as any。

最后代码还是javascript。在模板中就像从一开始就使用纯 javascript 一样。

如果你真的想预先发现不匹配，一些可能的解决方案是:

<强>1。验证

如前所述，进行手动验证或使用验证库来指定约束，例如https://validatejs.org/

顺便说一句，您还可以使用 Pipe 对您的任何值动态添加验证，并使您的 html 更加清晰。

<强>2。配置对象

您可以捕获类型在对象中很重要的组件的配置，因此

@Input() public config: {
  labelSize: 'small' | 'normal' | 'large';
} = { labelSize: 'normal' }

然后将输入绑定(bind)到myCompConfig:

<my-component [config]="myCompConfig"></my-component>

然后在你使用它的 Controller 中

this.myCompConfig = { labelSize: 'whatever' } // error <- type is enforced now

<强>3。模板的 TS

你可以使用 TS 而不是 HTML 作为模板，并用一些类型信息来辅助它:

先分享你的类型

export type LabelSize = 'small' | 'normal' | 'large'

@Input() public labelSize: LabelSize = 'normal';

my-template.ts

const labelSize: LabelSize = 'whatever' // error <- type is enforced 

export const template = `
    <my-component labelSize=${labelSize}></my-component>`
`;

然后在你的组件中直接使用它

import { template } from './my-template.ts';
@Component({ selector: 'something', template })

请注意，这也可以提取到用于创建部分太阳穴的工厂方法中，例如你可以有一个工厂来根据 labelSize 参数创建这个元素(这个参数可以有类型信息)。