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

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

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

1. Убедитесь, что у вас установлен Angular CLI: Прежде всего, необходимо установить Angular CLI, если он еще не установлен. Это можно сделать с помощью команды:

   npm install -g @angular/cli
   

2. Создайте новый проект Angular (если его еще нет): Если у вас еще нет проекта, вы можете создать новый с помощью команд:

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

3. Создайте директиву с помощью CLI: Чтобы создать новую директиву, используйте команду ng generate directive или сокращенно ng g d. Например, для создания директивы с именем highlight вы можете ввести:

   ng generate directive highlight
   

   
   или

   ng g d highlight
   

4. Структура созданной директивы: В результате выполнения команды в вашем проекте будет создан файл директивы highlight.directive.ts и дополнительные файлы для тестов. Пример структуры файлов:

   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!