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

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

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

的host是其处理器的观察员，在什么事件上，和。在这种情况下，“主人”意味着什么？

来源

2016-04-19 太極者無極而生

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

(focus)...意味着监听的组件本身
[class.someClass]...意味着添加/删除组件本身
一类的事件...

来源

2016-04-19 13:16:43

是不是* *所有关于这个DOM元素？所以，像'listeners'或'observers'这样的名称会比'host'更有意义，因为它是关于事件监听器和处理程序的？ –

我想这是关于DOM元素（主机）和类实例之间的一些区别，这是不同的。还有视图（主机元素的子元素）。我认为这是明确的。 –

host意味着您将配置什么违反指令适用的要素。

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

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

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

    onBlur() { 
    // handle blur event 
    } 
}

来源

2016-04-19 13:17:29

指令被绑定到主机元件：

<input autoGrow>

<input>被称为主机在此上下文中。

(focus)和(blur)实际上是由主机发送的事件，它是一样直接添加听众input：

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

来源

2016-04-19 13:19:52 kemsky

如果我们可以使用''，这是否意味着'host：'部分实际上可能不仅仅是事件和处理程序？ –

是的，您可以定义输入/输出名称，样式，绑定，但文档非常差。 – kemsky

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

回答

相关问题