Перш ніж перейти до декораторів власності HostListener і HostBining, давайте розглянемо елемент хоста.
Поняття елемента хоста застосовується як до інструкцій, так і до компонентів. Щодо інструкцій, концепція досить проста. Елемент, який застосовує інструкцію, — це елемент хоста. Припустимо, ми оголосили директиву HighlightDirective (селектор: '[exeHighlight]'):
У наведеному вище HTML-коді елемент p — це елемент хоста. Якщо директива застосовується до власного компонента, наприклад:
У цьому випадку кастомним елементом excel-лічильника є елемент host.
HostListener — це декоратор нерухомості, який додає прослуховування подій до елементів хоста.
У Angular можна використовувати декоратор HostBinding для реалізації властивого зв'язування елементів.
Ця директива демонструє, як використовувати декоратор HostListener для прослуховування подій кліків користувача
Крім того, ми можемо слухати події, створені об'єктами, відмінними від елемента хоста, такими як вікно, документ чи тіло
Ціль може бути вікном, документом або тілом
@HostBinding() і @HostListener() корисні при налаштуваннях інструкцій. @HostBinding() може додавати класи, стилі, атрибути тощо до елемента хоста команди, тоді як @HostListener() може слухати події на елементі хоста.
Приклад: Реалізуйте колір шрифту та рамки, які змінюють шрифт і колір рамки в реальному часі під час набору
Давайте поговоримо про основну частину коду вище:
(1): Назви нашу командну програмуRainbow
(2): Визначте всі можливі кольори, які нам потрібно показати
(3): Визначити та прикрасити колір і рамкиКолір @HostBinding() для стилізації
(4): Використовуйте @HostListener() для прослуховування події keydown елемента хоста і випадково призначте кольори для кольору та borderColor
Використайте цю команду на сторінці:
Ефект такий:
|
Опубліковано 26.06.2019 14:42:08
|
|
|
|
