Angular中@Component装饰器的host属性功能及工作原理是什么？

1. host属性的基本定义 #

host是@Component装饰器元数据中的可选配置项，用于直接绑定组件宿主元素的相关属性、事件、类名、样式规则。所谓宿主元素，就是使用该组件时的外层标签，本示例中对应的就是<app-password-input>标签。

2. host属性的工作机制 #

Angular会在组件初始化阶段，自动将host内配置的所有绑定规则挂载到宿主元素上，无需开发者在组件内部模板或父组件调用处额外编写绑定代码。常见的绑定场景包括：

• 事件绑定：用(事件名)格式声明要监听的宿主事件，值为组件类中要触发的方法
• 属性绑定：用[属性名]格式声明要绑定的宿主属性，值为组件类中的变量
• 类/样式绑定：用[class.自定义类名]、[style.样式属性]格式动态控制宿主的样式状态

3. 结合示例代码的具体说明 #

你提供的代码是Angular自定义表单控件的标准实现逻辑，已经通过NG_VALUE_ACCESSOR接入了Angular的表单控制体系，host段的三行配置作用如下：

host: {
  '(change)': 'onChange($event.target.value)',
  '(input)': 'onChange($event.target.value)',
  '(blur)': 'onTouched()',
}

• (change)绑定：监听宿主元素触发的change事件，事件触发时调用组件内的onChange方法，将输入框当前值传入，同步更新Angular表单控件的存储值，change事件仅在输入完成、控件失焦或回车确认时触发
• (input)绑定：监听宿主元素触发的input事件，逻辑同change事件，区别是input事件会在用户每输入一个字符时实时触发，两者同时绑定可以覆盖所有表单值更新的场景
• (blur)绑定：监听宿主元素的失焦事件，触发时调用onTouched方法，标记表单控件为已触碰状态，适配Angular表单的校验状态判断逻辑

下方的registerOnChange、registerOnTouched是Angular自定义表单控件要求实现的ControlValueAccessor接口方法，作用是将Angular表单内置的更新函数注入到自定义组件中，和host绑定触发的方法一一对应。

补充说明 #

除了在@Component的host属性中配置，也可以用@HostListener、@HostBinding装饰器实现完全等价的效果，比如本示例的事件绑定也可以改写为：

// 写在组件类内部
@HostListener('change', ['$event.target.value'])
@HostListener('input', ['$event.target.value'])
onChange(value: string) {
  // 原有逻辑保持不变
}

@HostListener('blur')
onTouched() {
  // 原有逻辑保持不变
}

两种写法没有功能差异，仅代码组织形式不同。

内容的提问来源于stack exchange，提问作者Mehmet Aziz Algüllü