Der Unterschied zwischen der Verwendung von @HostBinding() und @HostListener() in AngularJS

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 Anweisungen

Dieser 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];
 }
}

Lassen Sie uns über die Hauptteile des obigen Codes sprechen:

①: Benennen Sie unsere Direktive appRainbow

②: 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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

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!