Атрибуты Директивы

Директивы атрибутов Angular — это ряд встроенных директив, которые мы можем добавить к нашим элементам HTML, которые придают им динамическое поведение. Таким образом, директива атрибута изменяет внешний вид или поведение элемента DOM.

Обзор директив

Существует три вида директивы в Angular, а именно:

  • Компоненты — это в основном директива с шаблоном.
  • Структурные директивы — Структурная директива изменяет макет DOM на добавление и удаление элементов DOM.
  • Директивы атрибутов — этот тип директив изменяет внешний вид или поведение элемента, компонента или другой директивы.

Компоненты являются наиболее распространенными из трех директив. Пример компонента показан ниже:

Код TypeScript (component.ts):

  @  Компонент ({селектор: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css')})export class AppComponent {title =' Это образец компонента  ! ';}  

Структурные директивы изменяют структуру представления. Двумя примерами являются директивы NgFor и NgIf. В качестве примера

index.html

  
Добро пожаловать на страницу индекса

Директивы атрибутов используются как атрибуты элементов.

например,

HTML-код:

  
Этот div изначально выделен курсивом, имеет нормальный вес и очень большой ( 24px).

Код TypeScript:

  currentStyles: {}  ; setCurrentStyles () {//Стили CSS: устанавливаются в соответствии с текущим состоянием свойств компонента this.currentStyles = {'font-style': this.canSave?  'italic': 'normal', 'font-weight':! this.isUnchanged?  "жирный": "нормальный", "размер шрифта": this.isSpecial?  '24px': '12px'};}  

Живая демонстрация:

Это просто фрагмент кода объяснение конкретной концепции и может не иметь вывода

См. атрибуты Pen attributesDirectiveExample от w3resource (@ w3resource) на CodePen.

Создайте простую директиву атрибута

Директива атрибута как минимум требует создания класса контроллера, аннотированного с помощью @Directive, который определяет селектор, идентифицирующий атрибут. Класс контроллера реализует желаемое поведение директивы.

Мы продемонстрируем создание простой директивы атрибута appHighlight для установки цвета фона элемента, когда пользователь наводит курсор на этот элемент.

  

Наведите курсор на выделение

Напишите код директивы

Создайте файл класса директивы в окне терминала с помощью команды CLI ng generate directive.

  ng generate directive highlight  

Интерфейс командной строки создает highlight.directive.ts, соответствующий тестовый файл (.spec.ts, и объявляет класс директивы в корневом модуле AppModule.

Сгенерированный файл highlight.directive.ts показан ниже

Код TypeScript:

  import {Directive} from '@ angular/core'; @ Directive ({selector: '[appHighlight]'}) экспортный класс HighlightDirective {constructor () {}}   

Импортированный символ директивы предоставляет угловой декоратор @Directive.

Свойство одиночной конфигурации декоратора @Directive определяет селектор атрибутов CSS директивы, [appHighlight].

Это скобки ([]), которые делают его селектором атрибутов. Angular находит каждый элемент в шаблоне, который имеет атрибут с именем appHighlight, и применяет логику этой директивы к этому элементу.

Шаблон селектора атрибутов объясняет название такого рода директив.

Почему бы не «привет ghlight «?

Хотя выделение было бы более лаконичным селектором, чем appHighlight, и он работал бы, лучше всего добавлять префиксы к именам селекторов, чтобы они не конфликтовали со стандартными атрибутами HTML. . Это также снижает риск столкновения с именами сторонних директив. Интерфейс командной строки добавил для вас префикс приложения.

Убедитесь, что вы не добавили префикс к имени директивы выделения с помощью ng, потому что этот префикс зарезервирован для Angular, и его использование может вызвать ошибки, которые трудно диагностировать.

После метаданных @Directive идет класс контроллера директивы, называемый HighlightDirective, который содержит (в настоящее время пустую) логику для директивы. Экспорт HighlightDirective делает директиву доступной.

Теперь отредактируйте созданный файл highlight.directive.ts, чтобы он выглядел следующим образом

Код TypeScript (отредактированный файл выделения. directive.ts):

  import {Directive, ElementRef} from '@ angular/core'; @ Directive ({selector: '[appHighlight]'})  класс экспорта HighlightDirective {конструктор (el: ElementRef) {el.nativeElement.style.backgroundColor = 'желтый';  }}  

Оператор импорта указывает дополнительный символ ElementRef из базовой библиотеки Angular:

Вы используете ElementRef в конструкторе директивы для вставки ссылки к элементу DOM хоста, элементу, к которому вы применили appHighlight.

ElementRef предоставляет прямой доступ к элементу DOM хоста через его свойство nativeElement.

Эта первая реализация устанавливает цвет фона основного элемента станет желтым.

Применить директиву атрибута

Как показано в component.html выше, для используйте новый HighlightDirective, добавьте элемент абзаца (

) в шаблон корневого AppComponent и примените директиву как атрибут.

  

Наведите курсор на выделение!

Теперь запустите приложение, чтобы увидеть HighlightDirective в действии.

  ng serve  

Таким образом, Angular обнаружил атрибут appHighlight в элементе

хоста. Он создал экземпляр класса HighlightDirective и вставил ссылку на элемент

в конструктор директивы, который устанавливает стиль фона элемента

на желтый.

Оцените статью
nanomode.ru
Добавить комментарий