Før vi går i gang med HostListener- og HostBinding-ejendomsdekoratorerne, lad os se nærmere på værtselementet.
Begrebet værtselement gælder både for instruktioner og komponenter. Med hensyn til instruktioner er konceptet ret enkelt. Det element, der anvender instruktionen, er værtselementet. Lad os sige, at vi har erklæret en HighlightDirective-direktiv (selector: '[exeHighlight]'):
I ovenstående HTML-kode er p-elementet værtselementet. Hvis direktivet anvendes på en brugerdefineret komponent, såsom:
I dette tilfælde er exe-tællerens brugerdefinerede element værtselementet.
HostListener er en ejendomsdekorator, der tilføjer event-lytting til værtselementer.
I Angular kan vi bruge HostBinding-decoratoren til at implementere egenskabsbinding af elementer.
Denne direktiv demonstrerer, hvordan man bruger HostListener-decoratoren til at lytte efter brugerens klikbegivenheder
Derudover kan vi også lytte efter begivenheder genereret af objekter andre end værtselementet, såsom vindue, dokument eller krop
Målet kan være vindue, dokument eller krop
@HostBinding() og @HostListener() er nyttige, når man tilpasser instruktioner. @HostBinding() kan tilføje klasser, stilarter, attributter osv. til værtselementet i kommandoen, mens @HostListener() kan lytte til begivenheder på værtselementet.
Eksempel: Implementér en skrifttype og kantfarve, der ændrer skrifttypen og kantens farve i realtid, mens du skriver
Lad os tale om hoveddelen af koden ovenfor:
(1): Navngiv vores kommando appRainbow
(2): Definer alle de mulige farver, vi skal vise
(3): Definer og dekorer farve og kantFarve med @HostBinding() til styling
(4): Brug @HostListener() til at lytte til keydown-begivenheden for værtselementet og tildeles tilfældigt farver til farve og borderColor
Brug denne kommando på siden:
Effekten er som følger:
|
Opslået på 26/06/2019 14.42.08
|
|
|
|
