Angular中@Input传值报错：string类型无法赋值给函数类型

问题根源 #

你写的@Input语法不符合Angular规范：直接将foo声明为方法的形式，Angular会把这个输入属性的类型识别为(value: any) => void函数，但你在模板里传递的bar是字符串类型，类型不匹配就抛出了Type 'string' is not assignable to type '(value: any) => void'错误。

要实现输入属性的setter逻辑，必须用set关键字声明。

修正后的TS代码 #

private _foo = ''
@Input() set foo(value: any) {
  this._foo = value?.toString() || ''
}

// 若需要读取foo的值，可配套添加getter
get foo(): string {
  return this._foo
}

模板补充说明 #

• 如果bar是当前组件类中定义的变量，确保它已正确初始化；
• 如果要传递字符串字面量，需要用引号包裹，写法为[foo]="'bar'"，或者直接用属性绑定简写foo="bar"。

内容的提问来源于stack exchange，提问作者Raphaël Balet