Предварительные условия для выступления на #ngIndia
Привет милые люди!
Поскольку до конференции Angular в Индии - #ngIndia осталось несколько дней, здесь я записал кое-что из того, что нужно знать, прежде чем вы приедете на мой доклад на тему «HostBinding () & HostListener () »в Angular.
NgIndia проходит 23 февраля 2019 года в Фортуна Экскалибур, Гургаон, Индия. Подробности смотрите на сайте конференции ng-ind.com.
Когда вы посмотрите на повестку дня конференции, вы увидите, что все темы требуют от вас знания основных концепций Angular. И поэтому, чтобы извлечь максимальную пользу из этой однодневной конференции, вам обязательно нужно проделать домашнюю работу.
Таким образом, вам будет немного легче.
Тема, на которой основан мой доклад, требует базовых знаний о том, что такое компоненты, как директивы используются в Angular, различные типы директив, приложения директив, можем ли мы создавать собственные директивы и, что наиболее важно, некоторую терминологию связаны с темой, потому что мы определенно не хотим заходить в гугл каждый раз, когда в воздух подбрасывается случайное тяжелое слово.
Начнем с легкого и «относящегося к теме» введения о том, что такое компоненты.
Компонент - это базовый строительный блок приложения Angular. Компоненты являются только технически директивами, с той разницей, что это подмножества директив, которые всегда имеют собственный шаблон. Декоратор @Component () определяет класс как компонент и определяет его функционирование соответствующим образом.
Проще говоря, он служит контроллером для пользовательского интерфейса. Он состоит из кода машинописного текста, HTML и CSS.
Тело компонента выглядит так:
Но что такое директивы?
Когда мы говорили о компонентах, мы использовали это относительно Директив. Так какие же на самом деле директивы! Angular создает приложения с помощью директив в качестве основных строительных блоков. Компоненты - это в основном директивы с шаблоном. Директива изменяет модель DOM, чтобы изменить ее внешний вид, поведение или расположение элементов. Директивы используют декоратор @Directive (), чтобы пометить класс как директиву и соответствующим образом определить его функциональность.
Директивы в Angular бывают трех типов:
- Компоненты
- Директивы по атрибутам
- Структурные директивы
Компонентные директивы, как мы определили ранее, - это директивы, с которыми связан шаблон. Они также известны как автономные директивы.
Директивы атрибутов - это директивы, которые изменяют поведение или внешний вид компонента, такого элемента, как стиль шрифта, цвет фона и т. Д. Некоторые из встроенных директив в Angular:
- ng-bind
- нг-модель
- ng-init и т. д.
Структурные директивы, однако, используются для изменения макета элементов DOM путем отображения или скрытия или, скажем, добавления или удаления элементов DOM. Это похоже на условные утверждения.
Наиболее часто используемые структурные директивы - это * ngIf и * ngFor.
Вот один простой пример использования * ngIf:
Директивы очень полезны, потому что они расширяют возможности приложения, привязывая элемент HTML к данным приложения. Наиболее распространенное применение директив - преобразование DOM. Вы можете выполнять практически любую задачу с помощью директив.
Они предоставляют нам повторно используемый компонент HTML, поведение HTML, которое можно использовать повторно.
В целом, с помощью директив в Angular мы можем делать почти все. Помимо встроенных директив, которые у нас есть, мы также можем создавать свои собственные пользовательские директивы.
Пользовательские директивы помогают нам определять нашу собственную функциональность для элементов DOM. Это наиболее важная тема для понимания HostBinding () и HostListener ().
В этом сообщении блога мы быстро увидим, как создать директиву настраиваемого атрибута и какое отношение она имеет к теме, а затем перейдем к рассмотрению важной терминологии.
Чтобы создать директиву настраиваемого атрибута в Angular, мы создадим класс и украсим его декоратором @Directive (). Это будет шаг 1 на пути к созданию нашей настраиваемой директивы.
Шаг 2 - добавить службы, необходимые для выполнения нашей директивы. Сервисы сами по себе представляют собой обширную концепцию, но пока чтобы понять, мы используем сервисы для взаимодействия компонентов между двумя компонентами, которые не связаны друг с другом и не зависят друг от друга.
Здесь выполняется больше половины нашей работы по созданию настраиваемой директивы. Следующим шагом, например, шагом 3, является регистрация вашей собственной директивы внутри модуля.
Шаг 4: продолжайте, используйте директиву 😊.
Эта директива, которую мы создали здесь, просто изменяет внешний вид вашего элемента DOM. Я прикрепил здесь код Stackblitz для создания настраиваемой директивы в Angular, чтобы вы могли пойти и поиграть, и ПОДГОТОВИТЕСЬ К РАЗГОВОРУ.
Однако мы всегда можем изменить функциональность или применить директиву только при возникновении определенного события. Мы также можем изменить только определенное свойство ведущего элемента. Мы можем указать Angular изменять внешний вид только тогда, когда пользователь нажимает на элемент, или изменять только определенное свойство, когда пользователь наводит курсор на элемент. Чтобы сделать эти дополнения к нашим пользовательским директивам, мы используем HostBinding () и HostListener (), и именно об этом будет идти разговор.
Прежде чем мы подумаем, что готовы узнать, что будет дальше, давайте кратко рассмотрим терминологию, важную для нас, чтобы лучше понять.
Недавно мы использовали слово Host Element, когда говорили о применении специальных директив. Хост-элемент - это тот HTML-элемент, к которому мы применяем нашу настраиваемую директиву.
Итак, предположим, что в приведенном выше случае,
Если [app-ch-color] - ваша директива, основным элементом будет этот div на котором вы применили эту директиву.
Сервисы внедряются, когда нам нужно, чтобы наши компоненты взаимодействовали друг с другом. Существуют разные способы взаимодействия компонентов, такие как использование Input (), Output (), но когда два компонента не зависят друг от друга в своей работе и полностью независимы, нам нужны службы.
HostListener (), как следует из названия, используется Nhused, когда мы хотим захватить событие нашего Host Element и работать в соответствии с указаниями события.
HostBinding (), с другой стороны, используется, когда необходимо захватить свойство Host Element и изменить его на.
