Автор оригинала: FreeCodeCamp Community Member.

Гулфам Ансари

После долгого времени играя с угловым числом, я наконец придумал понятное объяснение угловых директив. В этой статье мы сначала поймете, на каком именно то есть директива и как его использовать в угловом угловом углу. Мы создадим наши собственные индивидуальные директивы. Так что же мы ждем? Давайте погрузимся глубоко в это.

Что такое угловая директива?

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

Из основной концепции угловые директивы классифицируются на три категории.

1. Директивы атрибутов
2. Структурные директивы
3. Составные части

Директивы атрибутов

Директивы атрибутов несут ответственность за манипулирование внешним видом и поведением элементов DOM. Мы можем использовать директивы атрибутов для изменения стиля элементов DOM. Эти директивы также используются для скрытия или отображения конкретных элементов DOM условно. Angular предоставляет многие встроенные директивы атрибутов, такие как Ngstyle , NGClass И т. Д. Мы также можем создать наши собственные индивидуальные директивы атрибутов для нашей желаемой функциональности.

Структурные директивы

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

Вы можете легко дифференцироваться между структурным и атрибутным директивом, глядя на синтаксис. Имя структурной директивы всегда начинается с префикса звездочки (*), тогда как Директива атрибута не содержит префикса. Три самых популярных встраиваемых структурных директивных директив Angular предлагают NGIF , NGFOR и Ngswitch Отказ

Составные части

Компоненты являются директивами с шаблонами. Единственное различие между компонентами и двумя двумя типами директив являются шаблон. Атрибут и структурные директивы не имеют шаблонов. Итак, можно сказать, что компонент является более чистой версией Директивы с шаблоном, что легче использовать.

Используя угловые встроенные директивы

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

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

 I am an Attribute Directive

NGIF Директива является структурной директивой, используемой для добавления элементов в дому в соответствии с некоторыми условиями.

I am a Structural Directive

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

Создание пользовательской директивы просто похоже на создание углового компонента. Для создания пользовательской директивы мы должны заменить @Component Декоратор с @Directive декоратор.

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

Создать app-highlight.directive.ts Файл в SRC/приложение Папка и добавить фрагмент кода ниже.

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

@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private eleRef: ElementRef) {

        eleRef.nativeElement.style.background = 'red';

    }

}

Здесь мы импортируем Директива и Elementref от углового ядра. Директива Предоставляет функциональность @Directive Декоратор, в котором мы предоставляем свой селектор недвижимости в apphighlight Так что мы можем использовать этот селектор в любом месте приложения. Мы также импортируем Elementref который отвечает за доступ к элементу DOM.

Теперь, чтобы получить apphighlight Директива к работе, нам нужно добавить нашу директиву на массив деклараций в app.module.ts файл.

import ...;

import { ChangeThemeDirective } from './app-highlight.directive';

@NgModule({

declarations: [

AppComponent,

ChangeThemeDirective

],

imports: [

...

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Теперь мы собираемся использовать нашу недавно созданную пользовательскую директиву. Я добавляю apphightlightlight Директива в app.component.html Но вы можете использовать его где угодно в приложении.

Highlight Me !

Выход вышеуказанного фрагмента кода будет выглядеть так.

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

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

Итак, давайте начнем с создания нашей структурной директивы. В этой директиве мы собираемся реализовать * Appnot Директива, которая будет работать прямо противоположным * NGIF Отказ

Теперь создайте app-not.directive.ts Файл в SRC/приложение Папка и добавьте код ниже.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({

    selector: '[appNot]'

})

export class AppNotDirective {

constructor(

    private templateRef: TemplateRef,

    private viewContainer: ViewContainerRef) { }

    @Input() set appNot(condition: boolean) {

        if (!condition) {

            this.viewContainer.createEmbeddedView(this.templateRef);

        } else {

            this.viewContainer.clear();        }

    }

}

Как вы видели в приведенном выше фрагменте кода, мы импортируем Директива, вход, Templateref и ViewContainerRef от @ угловой/ядро.

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

Templateref Представляет встроенный шаблон, который используется для создания экземпляров встроенных видов. Эти встроенные представления связаны с шаблоном, который должен быть отображен.

ViewContainerRef это контейнер, где можно прикрепить один или несколько просмотров. Мы можем использовать createembeddedview () Функция для подключения встроенных шаблонов в контейнере.

Теперь, чтобы получить Appnot Директива к работе, нам нужно добавить нашу директиву на массив деклараций в app.module.ts файл.

import ...;

import { AppNotDirective } from './app-not.directive';

@NgModule({

declarations: [

AppComponent,

AppNotDirective

],

imports: [

...

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Теперь пришло время использовать нашу недавно созданную структурную директиву.

Я добавляю Appnot Директива в app.component.html Но вы можете использовать его где угодно в приложении.

True
False

* Appnot Директива спроектирована таким образом, чтобы он добавил элемент шаблона в DOM, если * Appnot Значение это ложь прямо напротив * NGIF Директива.

Выход вышеуказанного фрагмента кода будет выглядеть так.

Я надеюсь, что эта статья ответила большинство ваших вопросов относительно угловых директив. Если у вас есть какие-либо вопросы или сомнения, не стесняйтесь добраться до меня в окне комментариев.