Dieses Mal werde ich Ihnen die Unterschiede zwischen @HostBinding() und @HostListener() in AngularJS und die Hinweise bei der Verwendung von @HostBinding() und @HostListener() vorstellen. Was sind die Dinge in AngularJS? Nachfolgend finden Sie praktische Fälle.
@HostBinding() und @HostListener() sind beim Anpassen von Direktiven sehr nützlich. @HostBinding() kann Klassen, Stile,Attribute usw. zum Host-Element der Direktive hinzufügen, während @HostListener() das -Ereignis auf dem Host-Element abhören kann.
@HostBinding() und @HostListener() werden nicht nur in benutzerdefinierten Anweisungen verwendet, sondern häufig auch in benutzerdefinierten AnweisungenDieser Artikel basiert auf Angular2+
Als Nächstes lernen wir die Verwendung von @HostBinding() und @HostListener(), indem wir einen Befehl implementieren, der die Schriftart und Rahmenfarbe während der Eingabe in Echtzeit ändert.
import { Directive, HostBinding, HostListener } from '@angular/core';
@Directive({
selector: '[appRainbow]'①
})
export class RainbowDirective{
possibleColors = [
'darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff',
'mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey'
];②
@HostBinding('style.color') color: string;
@HostBinding('style.borderColor') borderColor: string;③
@HostListener('keydown') onKeydown(){④
const colorPick = Math.floor(Math.random() * this.possibleColors.length);
this.color = this.borderColor = this.possibleColors[colorPick];
}
} ②: Definieren Sie alle möglichen Farben, die wir anzeigen müssen
③: Definieren und dekorieren Sie Farbe und BorderColor mit @HostBinding() zum Festlegen von Stilen
④: Verwenden Sie @HostListener(), auf die zugehört wird das Keydown-Ereignis des Host-Elements und weist color und borderColor zufällig Farben zu
springmvc kann keine Parameter akzeptieren, wenn Axios eine Anfrage sendet
So implementieren Sie die Netzwerkanforderungsfunktion über Axios
Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen der Verwendung von @HostBinding() und @HostListener() in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
