Haben Sie diese offiziellen Dokumente überprüft?
HostListener - Deklariert einen Host-Listener. Angular ruft die dekorierte Methode auf, wenn das Host-Element das angegebene Ereignis ausgibt.
@HostListener
- hört das Ereignis ab, das von dem Host-Element ausgegeben wird, mit dem deklariert wurde @HostListener
.
HostBinding - Deklariert eine Bindung der Host-Eigenschaft. Angular überprüft die Host-Eigenschaftsbindungen während der Änderungserkennung automatisch. Wenn sich eine Bindung ändert, wird das Host-Element der Direktive aktualisiert.
@HostBinding
- bindet die Eigenschaft an das Host-Element. Wenn sich eine Bindung ändert, HostBinding
wird das Host-Element aktualisiert.
HINWEIS: Beide Links wurden kürzlich entfernt. Der Abschnitt " HostBinding-HostListening " des Styleguides kann eine nützliche Alternative sein, bis die Links zurückkehren.
Hier ist ein einfaches Codebeispiel, um sich ein Bild davon zu machen, was dies bedeutet:
DEMO: Hier ist die Demo live im Plunker - "Ein einfaches Beispiel für @HostListener & @HostBinding"
- In diesem Beispiel wird eine
role
mit deklarierte Eigenschaft @HostBinding
an das Element des Hosts gebunden
- Denken Sie daran, dass dies
role
ein Attribut ist, da wir es verwenden attr.role
.
<p myDir>
wird, <p mydir="" role="admin">
wenn Sie es in Entwicklertools anzeigen.
- Anschließend wird das
onClick
mit dem @HostListener
Hostelement der Komponente angehängte Ereignis abgehört, das role
mit jedem Klick geändert wird.
- Die Änderung beim
<p myDir>
Klicken auf besteht darin, dass sich das öffnende Tag von <p mydir="" role="admin">
nach <p mydir="" role="guest">
und zurück ändert .
directives.ts
import {Component,HostListener,Directive,HostBinding,Input} from '@angular/core';
@Directive({selector: '[myDir]'})
export class HostDirective {
@HostBinding('attr.role') role = 'admin';
@HostListener('click') onClick() {
this.role= this.role === 'admin' ? 'guest' : 'admin';
}
}
AppComponent.ts
import { Component,ElementRef,ViewChild } from '@angular/core';
import {HostDirective} from './directives';
@Component({
selector: 'my-app',
template:
`
<p myDir>Host Element
<br><br>
We have a (HostListener) listening to this host's <b>click event</b> declared with @HostListener
<br><br>
And we have a (HostBinding) binding <b>the role property</b> to host element declared with @HostBinding
and checking host's property binding updates.
If any property change is found I will update it.
</p>
<div>View this change in the DOM of the host element by opening developer tools,
clicking the host element in the UI.
The role attribute's changes will be visible in the DOM.</div>
`,
directives: [HostDirective]
})
export class AppComponent {}
Ein kurzer Tipp, der mir hilft, mich daran zu erinnern, was sie tun -
HostBinding('value') myValue;
ist genau das gleiche wie[value]="myValue"
Und
HostListener('click') myClick(){ }
ist genau das gleiche wie(click)="myClick()"
HostBinding
undHostListener
sind in den Richtlinien und den anderen geschrieben(...)
und[..]
sind innerhalb Vorlagen geschrieben (von Komponenten).quelle
@HostListener
Dies ist der richtige Weg, wenn Sie im DOM nichts für eine typische Ereignisbindung haben, wie z. B. Tastatureingaben in meinem Fall.Hier ist ein einfaches Schwebebeispiel.
Vorlageneigenschaft der Komponente:
Vorlage
Und unsere Richtlinie
quelle
Eine weitere nette Sache
@HostBinding
ist, dass Sie es kombinieren können,@Input
wenn Ihre Bindung direkt auf einer Eingabe beruht, z.quelle
@Input()
?@HostBinding
. Wann müssen Sie verwenden@Input
?Eine Sache, die dieses Thema verwirrt, ist die Idee der Dekorateure, die nicht sehr klar gemacht wird, und wenn wir so etwas wie ...
Es funktioniert, weil es ein
get
Accessor ist . Sie konnten kein Funktionsäquivalent verwenden:Andernfalls besteht der Vorteil der Verwendung
@HostBinding
darin, dass sichergestellt wird, dass die Änderungserkennung ausgeführt wird, wenn sich der gebundene Wert ändert.quelle
Zusammenfassung:
@HostBinding
: Dieser Dekorator bindet eine Klasseneigenschaft an eine Eigenschaft des Hostelements.@HostListener
: Dieser Dekorator bindet eine Klassenmethode an ein Ereignis des Hostelements.Beispiel:
Im obigen Beispiel tritt Folgendes auf:
color
Eigenschaft in unsererAppComponent
Klasse ist an diestyle.color
Eigenschaft der Komponente gebunden . Wenn also diecolor
Eigenschaft aktualisiert wird, wird dies auch der Fall seinstyle.color
Eigenschaft unserer KomponenteVerwendung in
@Directive
:Obwohl es für Komponenten verwendet werden kann, werden diese Dekoratoren häufig in Attributanweisungen verwendet. Bei Verwendung in einem
@Directive
ändert der Host das Element, auf dem die Direktive platziert ist. Schauen Sie sich zum Beispiel diese Komponentenvorlage an:Hier ist p_Dir eine Direktive für das
<p>
Element. Wenn@HostBinding
oder@HostListener
innerhalb der Direktivenklasse verwendet wird, verweist der Host jetzt auf die<p>
.quelle
Theorie mit weniger Jargons
@Hostlistnening befasst sich im Wesentlichen mit dem Host-Element say (einer Schaltfläche), das eine Aktion eines Benutzers abhört und eine bestimmte Funktion "say alert" ("Ahoi!") Ausführt, während @Hostbinding umgekehrt ist. Hier hören wir uns die Änderungen an, die intern an dieser Schaltfläche vorgenommen wurden (sagen wir, als darauf geklickt wurde, was mit der Klasse passiert ist), und verwenden diese Änderung, um etwas anderes zu tun, z. B. eine bestimmte Farbe zu emittieren.
Beispiel
Stellen Sie sich das Szenario vor, in dem Sie ein Lieblingssymbol für eine Komponente erstellen möchten. Jetzt wissen Sie, dass Sie wissen müssen, ob das Element mit geänderter Klasse favorisiert wurde. Wir benötigen eine Möglichkeit, dies zu bestimmen. Genau hier kommt @Hostbinding ins Spiel.
Und wo es notwendig ist zu wissen, welche Aktion tatsächlich vom Benutzer ausgeführt wurde, kommt @Hostlistening ins Spiel
quelle