Как создать директивы с помощью CLI?

Директивы в Angular — это особые классы, которые позволяют взаимодействовать с DOM и изменять его поведение или внешний вид. Создание директив с использованием Angular CLI (Command Line Interface) — это простой и эффективный способ ускорить процесс разработки. В этом ответе мы рассмотрим, как правильно создать директиву с помощью Angular CLI, а также приведем несколько примеров.

Шаги для создания директивы с помощью Angular CLI

npm install -g @angular/cli

ng new my-angular-app
cd my-angular-app

ng generate directive highlight

ng g d highlight

src/
└── app/
    └── highlight.directive.ts
    └── highlight.directive.spec.ts

Пример реализации директивы

Теперь давайте добавим некоторый функционал в нашу директиву. К примеру, мы сделаем так, чтобы она изменяла цвет фона элемента, к которому применяется.

Откройте файл highlight.directive.ts и измените его следующим образом:

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

Использование директивы в шаблоне

После того как директива создана, вы можете использовать ее в любом компоненте вашего приложения. Например, добавим её в файл app.component.html:

<h2 appHighlight>Наведи на меня, чтобы увидеть эффект!</h2>

Заключение

Создание директив с использованием Angular CLI — это мощный инструмент для упрощения разработки приложений. Директивы позволяют вам повторно использовать логику и стили, применяя их к различным элементам в вашем приложении. Мы рассмотрели, как создать простую директиву, которая изменяет цвет фона элемента при наведении курсора. Теперь вы можете экспериментировать с директивами и развивать свои навыки в Angular!