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