如何为Angular ChildComponent添加非Input的动态HTML测试属性？

Angular 默认会把带插值或方括号绑定的属性识别为组件的 @Input 属性，所以当组件未定义对应 @Input 时就会抛出这个错误。要添加普通动态HTML属性，有两种可行方案：

• 使用 attr. 前缀绑定属性，这是Angular中处理普通HTML属性的标准方式，写法如下：

  <child-component [attr.test]="variable"></child-component>
  

• 若仅需插值字符串值，也可以用引号包裹插值表达式，同样会被识别为普通HTML属性：

  <child-component test="{{ variable }}"></child-component>
  

注意：第一种方法更适合绑定动态变量（比如数字、布尔值等），Angular会自动处理类型转换；第二种方法适合字符串类型的插值场景。

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