Angular2中的host

要将Angular组件渲染成DOM中的某种东西，你需要在Angular组件中结合一个DOM元素，我们称这些叫host元素。

一个组件可以用以下方式于其host DOM元素进行交互

• 它可以监听其事件。
• 它可以更新它的属性。
• 它可以调用它的方法。

例如，组件可以使用host事件监听输入，对输入值进行处理及将其存储在一个字段中，angular会于DOM同步已存储的值

@Component({
  selector: 'trimmed-input',
  host: {
    '(input)': 'onChange($event.target.value)',
    '[value]': 'value'
  }
})
class TrimmedInput {
  value: string;
  onChange(updatedValue: string) {
    this.value = updatedValue.trim();
  }
}

host元素也可以替换成 @HostBinding和@HostListener