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

最后代码仍然是javascript.在模板中就像从一开始就使用普通的javascript.

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

1.验证

如已经建议的那样,进行手动验证或使用验证库来指定约束,例如https://validatejs.org/

顺便说一句,您还可以使用Pipe在任何值上动态添加验证,并在html上更清晰.

2.配置对象

您可以捕获类型在对象中重要的组件的配置,如此

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

然后将输入绑定到myCompConfig：

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

然后在您使用它的控制器中

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

3.模板的TS

您可以使用TS代替HTML作为模板,并使用某些类型信息来协助它：

首先分享您的类型

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

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

我-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参数的元素(这个参数可以有类型信息).