Bevor wir auf die HostListener- und HostBinding-Immobiliendekorateure eingehen, werfen wir einen Blick auf das Host-Element.
Das Konzept eines Hostelements gilt sowohl für Anweisungen als auch für Komponenten. Was die Anweisungen angeht, ist das Konzept ziemlich einfach. Das Element, das die Anweisung anwendet, ist das Host-Element. Angenommen, wir haben eine HighlightDirective-Direktive deklariert (Selektor: '[exeHighlight]'):
Im obigen HTML-Code ist das p-Element das Host-Element. Wenn die Direktive auf eine benutzerdefinierte Komponente angewendet wird, wie zum Beispiel:
In diesem Fall ist das exe-Counter-benutzerdefiniertes Element das Host-Element.
HostListener ist ein Property Decorator, der Event-Listening zu Host-Elementen hinzufügt.
In Angular können wir den HostBinding-Dekorateur verwenden, um Eigenschaftsbindung von Elementen zu implementieren.
Diese Richtlinie zeigt, wie man den HostListener-Dekorateur verwendet, um auf Klickereignisse des Benutzers zu hören
Außerdem können wir auch auf Ereignisse hören, die von Objekten außerhalb des Host-Elements erzeugt werden, wie Fenster, Dokument oder Körper
Das Ziel kann Fenster, Dokument oder Body sein
@HostBinding() und @HostListener() sind nützlich, wenn man Anweisungen anpasst. @HostBinding() kann Klassen, Stile, Attribute usw. zum Host-Element des Befehls hinzufügen, während @HostListener() Ereignisse auf dem Host-Element abhören kann.
Beispiel: Implementiere eine Schriftart und eine Randfarbe, die während des Tippens die Schrift- und Randfarbe in Echtzeit ändert
Lassen Sie uns über den Hauptteil des obigen Codes sprechen:
(1): Nennen Sie unseren Befehl appRainbow
(2): Definiere alle möglichen Farben, die wir zeigen müssen
(3): Farbe und Rand definieren und dekorieren. Farbe mit @HostBinding() für das Styling
(4): Verwenden Sie @HostListener(), um das Keydown-Ereignis des Host-Elements abzuhören und Farben zufällig Farbe und BorderColor zuzuweisen
Verwenden Sie diesen Befehl auf der Seite:
Die Wirkung ist wie folgt:
|
Veröffentlicht am 26.06.2019 14:42:08
|
|
|
|
