Пользовательские директивы Angular предлагают надежный механизм изменения DOM и включения динамического поведения в ваши шаблоны.

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

Что такое директивы?

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

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

Преимущества директив

Вот некоторые преимущества использования директив в Angular:

  • Многоразовое использование
    instagram viewer
    : директивы можно использовать в нескольких компонентах, что экономит время и усилия.
  • Расширяемость: вы можете расширять директивы, добавляя новые функциональные возможности, делая ваши компоненты более мощными.
  • Гибкость: Используя директивы, вы можете изменять поведение или внешний вид элемента различными способами, что дает вам большую гибкость при создании приложений.

Настройка приложения Angular

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

npm install -g @angular/cli

После установки Angular CLI создайте проект Angular, выполнив следующую команду:

ng new custom-directives-app

Выполнение приведенной выше команды создаст проект Angular с именем пользовательские-директивы-приложение.

Создание пользовательской директивы

Теперь у вас есть проект Angular и вы можете приступить к созданию собственных директив. Создайте файл TypeScript и определите класс, украшенный @Директива декоратор.

@Директива декоратор — это декоратор TypeScript, используемый для создания пользовательских директив. Теперь создайте Highlight.directive.ts файл в источник/приложение каталог. В этом файле вы создадите пользовательскую директиву выделять.

Например:

import { Directive } from"@angular/core";
@Directive({
 selector: "[myHighlight]",
})
exportclassHighlightDirective{
constructor() {}
}

Блок кода выше импортирует Директива декоратор из @угловой/ядро модуль. @Директива декоратор украшает HighlightDirective сорт. Он принимает объект в качестве аргумента с селектор свойство.

В этом случае вы устанавливаете селектор собственность [myHighlight] это означает, что вы можете применить эту директиву к своим шаблонам, добавив myHighlight атрибут элемента.

Вот пример использования директивы в ваших шаблонах:


Some text</p>
</main>

Добавление поведения в директиву

Теперь вы успешно создали директиву. Следующий шаг — добавить в директиву поведение, позволяющее манипулировать DOM. Вам понадобится ЭлементСсылка из @angular/core, чтобы добавить поведение в директиву.

Вы добавите ElementRef в конструктор директивы. ElementRef — это оболочка собственного элемента внутри представления.

Вот пример того, как добавить поведение в директиву:

import { Directive, ElementRef } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
 }
}

В этом примере конструктор HighlightDirective Класс принимает параметр ElementRef, который Angular автоматически вставляет. ElementRef обеспечивает доступ к базовому элементу DOM.

С использованием this.element.nativeElement вы получаете доступ к собственному элементу DOM элемент параметр. Затем вы устанавливаете цвет фона компонента на светло-синий используя стиль свойство. Это означает, что какой бы элемент вы ни применили myHighlight директива to будет иметь светло-синий фон.

Чтобы директива стала функциональной, убедитесь, что вы импортировали и объявили ее в app.module.ts файл.

Например:

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { HighlightDirective } from'./highlight.directive';
@NgModule({
 declarations: [
 AppComponent,
 HighlightDirective,
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclassAppModule{ }

Теперь вы можете применить директиву myHighlight к элементам. в ваших компонентах Angular.


Some text</p>
</main>

Запустите приложение на сервере разработки, чтобы проверить работоспособность директивы. Вы можете сделать это, выполнив следующую команду в своем терминале:

ng serve

После выполнения команды перейдите к http://localhost: 4200/ в веб-браузере, и вы увидите интерфейс, похожий на изображение ниже.

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

Для этого замените код в Highlight.directive.ts файл с этим:

import { Directive, ElementRef, Input } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})


exportclassHighlightDirective{
 @Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
 }
constructor(private element: ElementRef) { 
 }
}

В приведенном выше блоке кода HighlightDirective класс содержит метод установки, называемый myHighlight. Этот метод занимает цвет параметр строки типа. Вы украшаете метод установки с помощью @Вход декоратор, позволяющий передавать значение цвета в директиву из родительского компонента.

Теперь вы можете определить цвет фона, передав значение директиве myHighlight.

Например:


'pink'>Some text</p>
</main>

Создание пользовательской структурной директивы

В предыдущих разделах вы узнали, как создавать, добавлять поведения и применять директивы настраиваемых атрибутов к вашему шаблону. Директивы атрибутов изменяют внешний вид элементов DOM, а структурные директивы добавляют, удаляют или перемещают элементы в DOM.

Angular предоставляет две структурные директивы: нгфор и нгиф. Директива ngFor отображает шаблон для каждого элемента коллекции (массива), а нгиф обрабатывает условный рендеринг.

В этом разделе вы создадите собственную структурную директиву, которая будет функционировать аналогично нгиф директива. Для этого создайте условие.directive.ts файл.

в условие.directive.ts файл, напишите этот код:

import { Directive, Input, TemplateRef, ViewContainerRef } from'@angular/core'
@Directive({
 selector: "[condition]"
})


exportclassConditionDirective{


 @Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
 } else {
this.viewContainer.clear();
 }
 }
constructor(
 private template: TemplateRef, 
 private viewContainer: ViewContainerRef 
 ) {}
}

Этот блок кода позволяет условно отображать элементы, применяя состояние директиву элементу и передачу логического значения из родительского компонента.

В конструкторе УсловиеДиректива класс, вы вводите экземпляр Ссылка на шаблон и ViewContainerRef. TemplateRef представляет шаблон, связанный с директивой, а ViewContainerRef представляет контейнер, в котором приложение отображает представления.

Метод установки класса ConditionDirective использует оператор if else для проверки параметра arg. Директива создает встроенное представление с использованием предоставленного шаблона, если параметр имеет значение true. создатьEmbeddedView Метод класса ViewContainerRef создает и отображает представление в DOM.

Если параметр ЛОЖЬ, директива очищает контейнер представления, используя прозрачный метод класса ViewContainerRef. При этом из DOM удаляются все ранее визуализированные представления.

После создания директивы зарегистрируйте ее в своем проекте, импортировав и объявив ее в файле app.module.ts файл. После этого вы можете начать использовать директиву в своих шаблонах.

Вот пример того, как использовать его в ваших шаблонах:


"true">Hello There!!!</p>
</main>

Теперь вы можете создавать собственные директивы

Пользовательские директивы в Angular предоставляют мощный способ манипулировать DOM и добавлять динамическое поведение в ваши шаблоны. Вы узнали, как создавать и применять пользовательские атрибуты и структурные директивы в приложениях Angular. Понимая, как создавать и использовать пользовательские директивы, вы сможете в полной мере воспользоваться возможностями Angular.