Warum werden die Beobachter in Angular2-Richtlinien als Host bezeichnet?

Question

In einer Angular2 Richtlinie Dekorateur:

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

die host sind die Beobachter, auf welchem ​​Ereignis und Handler, der. Was bedeutet "Host" in diesem Zusammenhang?

Answer 1

Host bedeutet das DOM-Element, das diese Komponente hostet.

• (focus)... bedeutet auf Ereignisse auf dem Bauteil selbst
• [class.someClass]... bedeutet hinzufügen/entfernen, um eine Klasse auf das jeweilige Bauteil
• ...

Answer 2

host bedeutet zu hören, dass Sie etwas konfigurieren wird gegen das Element, für das die Richtlinie gilt. In Ihrem Fall registrieren Sie Handler für die Ereignisse focus und blur des Elements.

Solche Handler werden in die Directive-Klasse definiert. Wenn zum Beispiel das Element den Fokus hat, wird die onFocus Methode aufgerufen.

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

    onBlur() { 
    // handle blur event 
    } 
} 

Answer 3

Richtlinie gebunden Element Gastgeber:

<input autoGrow> 

<input> wird in diesem Zusammenhang genannt Host.

(focus) und (blur) sind tatsächlich Ereignisse durch den Host geschickt, es ist die gleiche Zuhörer direkt an input als Zugabe:

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