HostBinding
一个装饰器，用于把一个 DOM 属性标记为绑定到宿主的属性，并提供配置元数据。 Angular 在变更检测期间会自动检查宿主属性绑定，如果这个绑定变化了，它就会更新该指令所在的宿主元素。
Decorator that marks a DOM property as a host-binding property and supplies configuration metadata. Angular automatically checks host property bindings during change detection, and if a binding changes it updates the host element of the directive.
| 选项 | 说明 |
|---|---|
hostPropertyName? | 要绑定到数据属性的 DOM 属性。 The DOM property that is bound to a data property. |
使用说明
下面的例子创建了一个指令，它会对具有 ngModel 指令的 DOM 元素设置 valid 和 invalid 属性。
The following example creates a directive that sets the valid and invalid properties on the DOM element that has an ngModel directive on it.
@Directive({selector: '[ngModel]'})
class NgModelStatus {
constructor(public control: NgModel) {}
@HostBinding('class.valid') get valid() { return this.control.valid; }
@HostBinding('class.invalid') get invalid() { return this.control.invalid; }
}
@Component({
selector: 'app',
template: `<input [(ngModel)]="prop">`,
})
class App {
prop;
}
