|
|
Opublikowano 26.06.2019 14:42:08
|
|
|
|
Zanim przejdziemy do dekoratorów właściwości HostListener i HostBinding, przyjrzyjmy się elementowi hosta.
Koncepcja elementu gospodarza odnosi się zarówno do instrukcji, jak i komponentów. Jeśli chodzi o instrukcje, koncepcja jest dość prosta. Elementem stosującym tę instrukcję jest element gospodarza. Załóżmy, że ogłosiliśmy dyrektywę HighlightDirective (selector: '[exeHighlight]'):
W powyższym kodzie HTML element p jest elementem hosta. Jeśli dyrektywa jest stosowana do niestandardowego komponentu, takiego jak:
W tym przypadku niestandardowym elementem exe-counter jest element hosta.
HostListener to dekorator nieruchomości, który dodaje elementy event listening do elementów hosta.
W Angular możemy użyć dekoratora HostBinding do implementacji wiązania właściwości elementów.
Ta dyrektywa pokazuje, jak użyć dekoratora HostListener do nasłuchiwania zdarzeń kliknięć użytkownika
Dodatkowo możemy również nasłuchiwać zdarzeń generowanych przez obiekty inne niż element gospodarza, takie jak okno, dokument czy treść ciała
Celem może być okno, dokument lub treść ciała
@HostBinding() i @HostListener() są przydatne przy dostosowywaniu instrukcji. @HostBinding() może dodawać klasy, style, atrybuty itp. do elementu hosta polecenia, podczas gdy @HostListener() może słuchać zdarzeń na elemencie gospodarza.
Przykład: Zaimplementuj kolor czcionki i ramek, który zmienia kolor czcionki i ramek w czasie rzeczywistym podczas pisania
Porozmawiajmy o głównej części powyższego kodu:
(1): Nazwijmy nasze dowództwo tęczą
(2): Zdefiniuj wszystkie możliwe kolory, które musimy pokazać
(3): Zdefiniuj i dekoruj kolor oraz ramkę kolorem za pomocą @HostBinding() do stylizacji
(4): Użyj @HostListener() do odsłuchania zdarzenia keydown elementu hosta i losowo przypisuj kolory do koloru i ramki
Użyj tego polecenia na stronie:
Efekt jest następujący:
|
Poprzedni:Zasada weryfikacji podpisu cyfrowego SM2Następny:JS określa, czy funkcje i zmienne js istnieją
|
