如何通过数据绑定设置组件主机名？解决自定义标签属性绑定报错问题

这个问题我之前也碰到过，Angular对组件输入属性和普通HTML属性的处理逻辑是不一样的，所以才会抛出Can't bind to 'name' since it isn't a known property of 'customTag'这个错误。下面给你两种可行的解决方案：

方案1：绑定普通HTML属性（无需修改自定义组件） #

如果你只是想给customTag对应的DOM元素添加一个name HTML属性，而不需要组件内部接收这个值，那可以用Angular的attr.前缀来明确告诉框架这是一个普通HTML属性绑定：

<!-- 方式1：属性绑定语法 -->
<customTag [attr.name]="componentId"/>

<!-- 方式2：插值语法（也可以正常工作） -->
<customTag attr.name="{{componentId}}"/>

这样Angular就不会把name当成组件的@Input()输入属性去查找，而是直接把它设置为DOM元素的HTML属性，也就不会报错了。

方案2：给自定义组件添加输入属性（需要修改组件） #

如果你的业务逻辑里需要customTag组件内部使用这个name值，那直接在customTag组件类里添加对应的输入属性定义即可：

// custom-tag.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'customTag',
  templateUrl: './custom-tag.component.html'
})
export class CustomTagComponent {
  // 添加name输入属性
  @Input() name: string;
  // 其他组件逻辑...
}

之后你原来的绑定写法<customTag [name]="componentId"/>或者<customTag name="{{componentId}}"/>就都能正常工作了，Angular会把componentId的值传递给customTag组件的name输入属性。

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