Angular能否使用类似[class.name]的语法给@Input()对象属性传值？

结论 #

你期望的someInput.required点语法直接给@Input对象的子字段传值的方式，在原生Angular中不可行。

原因 #

Angular 内置的[class.xxx]、[style.xxx]属于框架专门实现的类绑定、样式绑定专属规则，不能套用在自定义@Input属性上。Angular的输入绑定逻辑只会识别组件/指令上直接声明的@Input()属性名，不会自动解析点语法去修改某个输入对象的内部字段。

可行替代方案 #

方案1：拆分为独立@Input属性（最符合你期望的写法） #

把原对象内的字段拆成单独的输入属性，如果你仍然需要整合为统一对象使用，可以通过getter自动合并：

interface SomeDict {
  [key: string]: string
}
export class MyComponent {
  @Input() required?: string;
  @Input() min?: string;

  // 按需使用，自动把分散的输入合并为原someDict对象
  get someInput(): SomeDict {
    return {
      required: this.required ?? '',
      min: this.min ?? ''
    }
  }
}

模板中直接按原生属性写法传值即可，支持字符串插值：

<my-component 
  required="this field is required" 
  min="must be greater than {{ someMaxValue | currency:AUD}}"
>

方案2：保留单个对象输入，通过setter实现增量更新 #

如果你不想拆分输入属性，可以给对象输入加setter，每次传入部分属性自动合并：

interface SomeDict {
  [key: string]: string
}
export class MyComponent {
  private _someInput: SomeDict = {}
  @Input() set someInput(val: Partial<SomeDict>) {
    this._someInput = {...this._someInput, ...val}
  }
  get someInput(): SomeDict {
    return this._someInput
  }
}

父组件每次仅传入需要更新的字段即可：

<my-component [someInput]="{required: 'this field is required'}">
<my-component [someInput]="{min: 'must be greater than ' + (someMaxValue | currency:AUD)}">

内容的提问来源于stack exchange，提问作者Mel