Question

在Angular2指令装饰器中：

@Directive ({
    selector: "[autoGrow]",
    host: {
        "(focus)": "onFocus()",
        "(blur)": "onBlur()"
    } 
})

host是观察者，关于什么事件，以及哪个处理程序。在这种情况下，“主人”意味着什么？

Answer 1

指令绑定到主机元素：

<input autoGrow>

在这种情况下，

<input>被称为主持人。

(focus)和(blur)实际上是由主持人调度的事件，与将侦听器直接添加到input相同：

<input (focus)="onFocus()" (blur)="onBlur()">

Answer 2

Host表示承载此组件的DOM元素。

(focus)...表示侦听组件本身的事件
[class.someClass]...表示在组件本身上添加/删除类
...

Answer 3

host表示您将针对该指令适用的元素进行配置。

在这种情况下，您可以为元素的focus和blur事件注册处理程序。

这些处理程序将被定义到指令类中。例如，当元素具有焦点时，将调用onFocus方法。

@Directive ({
  selector: "[autoGrow]",
  host: {
    "(focus)": "onFocus()",
    "(blur)": "onBlur()"
  } 
})
export class MyDirective {
  onFocus() {
    // handle focus event
  }

  onBlur() {
    // handle blur event
  }
}

在Angular2指令中，为什么观察者称为主机？

3 个答案: