[MUSIC]
В самом первом модуле мы кратко рассмотрели директивы и
мы смотрим на структурные директивы.
Мы видели, как структурные директивы позволяют нам разрабатывать шаблоны.
Для наших угловых компонентов.
В этом уроке мы рассмотрим директивы атрибутов.
Третий вид директивы.
И мы также рассмотрим, как мы можем разработать пользовательскую директиву
в упражнении, которое следует за этой лекцией.
Итак, как мы поняли, директивы являются способом
проектирования обоих угловых шаблонов и позволяют нам делать
различные части манипуляции с дамбой с RAngular приложений представлений.
Итак, мы видели использование директив для указания углового повторения и
как рендеринга шаблонов в DOM.
И мы уже узнали, что в угловом приложении
использование структурных директив в шаблонах позволяет нам проектировать
наши взгляды на наше угловое приложение.
Мы также узнали, что компонент, который мы использовали так
широко в различных упражнениях в этом курсе.
Это особый вид директивы, который имеет шаблон или представление, прикрепленный к нему.
И мы также узнали ранее, что
есть два других вида директив, которые мы можем использовать в наших шаблонах.
Структурные директивы и директивы атрибутов.
Мы рассмотрели некоторые встроенные структурные директивы в самом первом модуле
этого курса.
И мы видели, как мы можем использовать структурные директивы, такие как NG4 или NGF и
больше в этих упражнениях в предыдущих частях этого курса.
Теперь мы рассмотрим другой вид директивы, атрибутивную директиву.
Что такое директива атрибута и
, как она помогает нам при разработке нашего углового приложения.
Итак, что такое атрибутивные директивы?
Директивы атрибутов используются в качестве атрибутов для элементов в вашем шаблоне.
Так же, как у вас есть свой HTML-код, который вы пишете в своем шаблоне и
элементы HTML, вы можете применить директиву атрибута
к этим элементам HTML.
Мы также видели структурную директиву пользователя.
И мы видели, что компоненты сами могут добавлять дополнительные HTML-подобные
элементы, которые могут быть использованы в шаблонах вашего Angular приложения.
Таким образом, как мы используем компоненты с их селекторами
был одним из способов использования директив в нашем угловом приложении.
Когда мы увидели использование структурных директив, которые были применены к
различных HTML элементов в нашем шаблоне.
Теперь мы рассмотрим директивы атрибутов, которые позволяют нам изменять
определенные свойства наших HTML-элементов.
Итак, что такое использование директив атрибутов?
Директивы атрибутов прослушивают и изменяют поведение других элементов HTML или
атрибутов или свойств или компонентов, используемых в шаблонах.
Мы действительно действительно использовали некоторые из встроенных атрибутов
директивы уже без явного разговора о них.
Говоря о встроенных атрибутивных директивах, которые входят в состав вашей
Angular структуры.
Вы уже сталкивались с моделью Ng в некоторых из предыдущих уроков
в этом курсе, в частности в области привязки данных и
также, когда мы изучали шрифты в предыдущем модуле.
Есть два других типа встроенных атрибутивных директив, которые мы
можем столкнуться - это NgClass и NgStyle.
По самому названию можно догадаться, какова их цель.
Аналогичным образом, есть некоторые другие модули, которые вы используете в ваших приложениях Angular
, таких как FormsModule, а также RouterModule, которые имеют собственный набор встроенных директив атрибутов, которые мы используем.
Действительно, мы уже использовали их, когда мы определяем формы и
также использовать маршрутизатор в нашем угловом приложении ранее.
Теперь, на данный момент, вам может быть интересно, как мне создать мою собственную директиву атрибутов
, если я заинтересован в создании пользовательской директивы, поэтому
это где мы рассмотрим, как вы можете получить пользовательскую директиву.
Давайте рассмотрим пользовательские директивы в следующем слайде кратко и
в следующем упражнении.
Поэтому в пользовательских директивах ваше ожидание заключается в том, что вы сможете реализовать
то, что вас интересует.
В частности, вот где мы можем создавать свои собственные пользовательские директивы.
Используя угловой интерфейс командной строки, вы можете выручить код голых костей для директивы
и затем изменить этот код, чтобы реализовать вашу пользовательскую директиву.
Поэтому, когда вы реализуете пользовательскую директиву с использованием Angular CLI,
она создаст директиву для вас.
И тогда вы сразу заметите, что в рамках директив,
вы будете использовать этот директивный декоратор украсить класс
для того, чтобы преобразовать класс в директиву и
мы столкнемся с одним таким в упражнении, которое следует.
Кроме того, с директором, особенно когда вы используете директивы атрибутов и
вы хотите изменить любой из элементов, которые используются в ваших шаблонах.
Другой класс, который нам полезен, называется ElementRef.
Это также важно из углового кода, и это вводится в ваш конструктор директив
, написанный вашим классом директивы.
И тогда это позволяет вам получить доступ к элементам DOM и
затем вносить в них изменения.
Итак, с этим быстрым пониманием того, как вы можете создавать пользовательские директивы,
давайте рассмотрим пример в упражнении, которое следует за этой лекцией.
[МУЗЫКА]