Приведи пример атрибутных директив?

Атрибутные директивы в Angular используются для изменения внешнего вида или поведения элемента DOM. Они позволяют добавлять функционал к существующим элементам без необходимости создания новых компонентов. Давайте рассмотрим несколько примеров создания и использования атрибутных директив.

Пример атрибутной директивы

1. Создание директивы

Для создания атрибутной директивы в Angular, используем Angular CLI. Выполним следующую команду в терминале:

ng generate directive highlight

Эта команда создаст файл 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);
    }
}

Объяснение кода

• @Directive: Этот декоратор сообщает Angular, что это директива.
• selector: Указывает селектор, который будет использоваться в HTML для применения этой директивы. В нашем случае это appHighlight.
• ElementRef: Используется для доступа к элементу DOM, к которому применяется директива.
• Renderer2: Позволяет безопасно манипулировать элементами DOM.
• @HostListener: Декоратор, который позволяет слушать события (например, mouseenter и mouseleave).
• highlight: Метод, который изменяет стиль фона элемента.

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

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

<h1 appHighlight>Наведи курсор на этот текст, чтобы увидеть эффект!</h1>
<p>Другой текст без эффекта.</p>

Примечания

1. После того как вы создали директиву, убедитесь, что она импортирована и добавлена в массив declarations вашего модуля (например, app.module.ts).

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {HighlightDirective} from './highlight.directive';

@NgModule({
    declarations: [
        AppComponent,
        HighlightDirective // добавляем директиву здесь
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

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

Заключение

Атрибутные директивы - мощный инструмент в Angular, который позволяет улучшать интерфейс приложения и добавлять интерактивность на уровне компонентов. Начните использовать их для создания более динамичных пользовательских интерфейсов!