在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指令中，爲什麼觀察者稱爲主機？

回答

相關問題