Преди да преминем към декораторите на свойства HostListener и HostBining, нека разгледаме елемента host.
Концепцията за хост елемент се прилага както за инструкции, така и за компоненти. За инструкциите концепцията е сравнително проста. Елементът, който прилага инструкцията, е елементът хост. Да кажем, че сме обявили директива HighlightDirective (селектор: '[exeHighlight]'):
В горния HTML код p елементът е елементът хост. Ако директивата се приложи към персонализиран компонент, като например:
В този случай потребителският елемент на exe-counter е елементът host.
HostListener е декоратор на имоти, който добавя слушане на събития към хост елементите.
В Angular можем да използваме декоратора HostBinding за реализиране на свързване на свойства на елементи.
Тази директива демонстрира как да се използва декораторът HostListener за слушане на потребителски клик събития
Освен това можем да слушаме за събития, генерирани от обекти, различни от елемента на хоста, като прозорец, документ или тяло
Целта може да бъде прозорец, документ или тяло
@HostBinding() и @HostListener() са полезни при персонализиране на инструкциите. @HostBinding() може да добавя класове, стилове, атрибути и др. към хост елемента на командата, докато @HostListener() може да слуша събития на хост елемента.
Пример: Имплементирайте шрифт и цвят на рамки, които променят шрифта и цвета на рамката в реално време, докато пишете
Нека поговорим за основната част от кода по-горе:
(1): Назови нашата командна програмаRainbow
(2): Дефинирайте всички възможни цветове, които трябва да покажем
(3): Дефинирайте и украсете цвета и рамкатаColor с @HostBinding() за стилизиране
(4): Използвайте @HostListener() за слушане на събитието за напускане на елемента на хоста и случайно разпределете цветовете на color и borderColor
Използвайте тази команда на страницата:
Ефектът е следният:
|
Публикувано в 26.06.2019 г. 14:42:08 ч.
|
|
|
|
