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

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

Директивы Обзор

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

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

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

Код TypeScript (component.ts):

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title ='This is a sample Component!';
}

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

index.html

<div *ngIf="false" class="name">Welcome to Index Page</div>

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

например

HTML-код:

<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

Код TypeScript:

currentStyles: {};
setCurrentStyles() {
  // CSS styles: set per current state of component properties
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}

Демонстрация в реальном времени:

См. Pen attributeDirectiveExample от w3resource ( @ w3resource ) в CodePen .

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

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

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

component.html

<p appHighLight> Hover to Highlight</p>

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

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

ng generate directive highlight

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

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

Код TypeScript:

import { Directive } from '@angular/core';
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor() { }
}

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

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

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

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

Почему бы не «выделить»?

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

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

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

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

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

import { Directive, ElementRef } from '@angular/core';
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor ='yellow';
    }
}

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

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

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

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

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

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

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

<p appHighlight>Hover to Highlight!</p>

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

ng serve

Таким образом, Angular нашел атрибут appHighlight в элементе <p> хоста. Он создал экземпляр класса HighlightDirective и вставил ссылку на элемент <p> в конструктор директивы, который устанавливает желтый стиль фона элемента <p>.

Предыдущий: Угловые элементы
Далее: Трубы