Angular2 - host

Posted on   |   In

总结

Component对象的参数host中放入的任何event，class等皆是指向本组件的

讨论来源: Material Button

@Component({
  selector: '[md-button]:not(a), [md-fab]:not(a), [md-raised-button]:not(a)',
  host: {
    '(mousedown)': 'onMousedown($event)',
    '(focus)': 'onFocus()',
    '(blur)': 'onBlur()',
    '[class.md-button-focus]': 'isKeyboardFocused',
  },
})
@View({
  template: BUTTON_TEMPLATE,
  encapsulation: ViewEncapsulation.None,
})
export class MdButton {...}

这里没有声明outputs
但host里写的event非常类似outputs的写法，因为都会在本组件的标签上出现

关键区分

  • 是否有outputs
  • outputs 是针对自定义的events的

结果：

这些mousedown 都是针对此组件自身，而不是父组件。即 点击此组件出发 方法onMousedown