Dit artikel is een spiegelartikel van machinevertaling, klik hier om naar het oorspronkelijke artikel te gaan.

Architect_Programmer_Code Landbouwnetwerk»Architect › Front-end ontwerp & web › Voorframeframe › Angular event binding/attribuut binding @HostListener, @HostBindin ...
Bekijken: 12212|Antwoord: 0

[Angular] Angular event bindings/attribuutbindingen @HostListener, @HostBinding

[Link kopiëren]
Geplaatst op 26-06-2019 14:42:08 | | | |
Voordat we ingaan op de HostListener- en HostBinding-woningdecorateurs, laten we eens kijken naar het host-element.

Het concept van een hostelement geldt zowel voor instructies als componenten. Wat betreft instructies is het concept vrij eenvoudig. Het element dat de instructie toepast is het hostelement. Stel dat we een HighlightDirective-richtlijn hebben uitgeroepen (selector: '[exeHighlight]'):

In de bovenstaande HTML-code is het p-element het host-element. Als de richtlijn wordt toegepast op een aangepaste component, zoals:

In dit geval is het exe-teller custom element het hostelement.

HostListener is een property decorator die event listening toevoegt aan hostelementen.

In Angular kunnen we de HostBinding-decorator gebruiken om property binding van elementen te implementeren.

Deze richtlijn laat zien hoe je de HostListener-decorator kunt gebruiken om te luisteren naar klikgebeurtenissen van gebruikers

Daarnaast kunnen we ook luisteren naar gebeurtenissen die worden gegenereerd door objecten anders dan het hostelement, zoals window, document of body
Het doelwit kan window, document of body zijn




@HostBinding() en @HostListener() zijn handig bij het aanpassen van instructies. @HostBinding() kan klassen, stijlen, attributen, enzovoort toevoegen aan het hostelement van het commando, terwijl @HostListener() evenementen op het hostelement kan afluisteren.

Voorbeeld: Implementeer een lettertype en randkleur die het lettertype en de randkleur in realtime verandert terwijl je typt

Laten we het hebben over het hoofdgedeelte van de bovenstaande code:
(1): Noem ons commando appRainbow
(2): Definieer alle mogelijke kleuren die we moeten tonen
(3): Definieer en decoreer kleur en randKleur met @HostBinding() voor styling
(4): Gebruik @HostListener() om te luisteren naar het keydown-event van het hostelement en wijs willekeurig kleuren toe aan kleur en borderColor

Gebruik dit commando op de pagina:

Het effect is als volgt:







Vorig:Het principe van SM2 digitale handtekeningverificatie
Volgend:Js bepaalt of Js-functies en -variabelen bestaan

Gerelateerde berichten
Disclaimer:
Alle software, programmeermaterialen of artikelen die door Code Farmer Network worden gepubliceerd, zijn uitsluitend bedoeld voor leer- en onderzoeksdoeleinden; De bovenstaande inhoud mag niet worden gebruikt voor commerciële of illegale doeleinden, anders dragen gebruikers alle gevolgen. De informatie op deze site komt van het internet, en auteursrechtconflicten hebben niets met deze site te maken. Je moet bovenstaande inhoud volledig van je computer verwijderen binnen 24 uur na het downloaden. Als je het programma leuk vindt, steun dan de echte software, koop registratie en krijg betere echte diensten. Als er sprake is van een inbreuk, neem dan contact met ons op via e-mail.
Mail To:help@itsvse.com