angular - 将 @Input() 与 Angular 中定义的列表匹配

Question

检查用户输入是否在条目白名单中的最佳做法是什么？

export class myClass {
  @Input() type: string;
}

要设置 type 应该只有在定义的列表中才有可能，否则它应该是空的。有 Angular 或 typescript 的通用方法吗？

Answer 1

为 @Input 使用私有(private)实例字段和 getter/setter 的组合。像这样:

export class myClass {
    private validType: string;

    @Input()
    public set type(value: string) {
       if(this.validate(value)) {
          this.validType = type;
       } else {
          this.validType = '';
       }
    }

    public get type() {
       return this.validType;
    }

    private validate(value: string) {
       // do your validation here
       return true;
    }
}

这确保每次输入属性发生变化时，都会检查我的验证方法(我使用 validate 作为此示例的名称)。如果您使用类型属性，您将始终获得经过验证的属性 validType。

如果您正在处理表单输入，您应该明确定义自己的 validator 用于此类任务并将其应用于表单字段。