След като играх дълго време с Angular, най-накрая излязох с разбираемо обяснение на Angular директивите. В тази статия първо ще разберем какво точно представлява директива и как да я използваме в Angular. Ние също ще създадем свои собствени директиви. И така, какво чакаме? Нека се потопим дълбоко в него.
Какво е ъглова директива?
Директивите са функциите, които ще се изпълняват, когато Angular компилаторът го намери . Ъгловите директиви подобряват способността на HTML елементи, като прикачват персонализирано поведение към DOM.
От основната концепция, ъгловите директиви са категоризирани в три категории.
- Директиви за атрибутите
- Структурни директиви
- Компоненти
Директиви за атрибутите
Директивите за атрибутите са отговорни за манипулирането на външния вид и поведението на DOM елементите. Можем да използваме директиви за атрибути, за да променим стила на DOM елементите. Тези директиви също се използват за скриване или показване на определени DOM елементи условно. Angular предоставя много вградени директиви за атрибути като NgStyle , NgClass и др. Също така можем да създадем свои собствени директиви за атрибути за желаната от нас функционалност.
Структурни директиви
Структурните директиви са отговорни за промяната на структурата на DOM. Те работят чрез добавяне или премахване на елементите от DOM, за разлика от директивите за атрибутите, които просто променят външния вид и поведението на елемента.
Можете лесно да разграничите структурната директива и директивата за атрибутите, като разгледате синтаксиса. Името на структурната директива винаги започва с префикс със звездичка (*), докато директивата за атрибутите не съдържа никакъв префикс. Трите най-популярни вградени структурни директиви, които Angular осигурява, са NgIf , NgFor и NgSwitch .
Компоненти
Компонентите са директиви с шаблони. Единствената разлика между Components и другите два типа директиви е Template. Атрибутите и структурните директиви нямат шаблони. Така че, можем да кажем, че компонентът е по-чиста версия на директивата с шаблон, който е по-лесен за използване.
Използване на ъглови вградени директиви
В Angular има много вградени директиви, които можете лесно да използвате. В този раздел ще използваме две много прости вградени директиви.
Директивата NgStyle е директива за атрибути, използвана за промяна на стила на всеки DOM елемент въз основа на някакво условие.
I am an Attribute Directive
В горния кодов фрагмент добавяме син фон, ако стойността на isBlue
променливата е вярна. Ако стойността на isBlue
променливата е false, тогава фонът на горния елемент ще бъде червен.Директивата NgIf е структурна директива, използвана за добавяне на елементи в DOM според някои условия.
I am a Structural Directive
В горния кодов фрагмент целият абзац ще остане в DOM, ако стойността на show
променливата е вярна, в противен случай ще започне от DOM.Създаване на директива за персонализирани атрибути
Създаването на персонализирана директива е точно като създаването на Angular компонент. За да създадем персонализирана директива, трябва да заменим @Component
декоратора с @Directive
декоратор.
И така, нека да започнем със създаването на нашата първа директива за персонализирани атрибути. В тази директива ще подчертаем избрания DOM елемент, като зададем цвета на фона на даден елемент.
Създайте app-highlight.directive.ts
файл в src/app
папка и добавете кодовия фрагмент по-долу.
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private eleRef: ElementRef) {
eleRef.nativeElement.style.background = 'red';
}
}
Тук внасяме Directive
и ElementRef
от Angular core. Предоставя Directive
функционалността на @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 { }
Сега ще използваме нашата новосъздадена потребителска директива. Добавям appHightlight
директивата в, app.component.html
но можете да я използвате навсякъде в приложението.
Highlight Me !
Резултатът от горния кодов фрагмент ще изглежда така.

Създаване на персонализирана структурна директива
В предишния раздел създадохме първата си директива за атрибути. Същият подход се използва и за създаване на структурната директива.
И така, нека да започнем със създаването на нашата структурна директива. В тази директива ще приложим *appNot
директивата, която ще работи точно срещу *ngIf
.
Сега създайте app-not.directive.ts
файл в src/app
папката и добавете кода по-долу.
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(); }
}
}
Както видяхте в горния кодов фрагмент, ние импортираме Directive, Input, TemplateRef and ViewContainerRef
от@angular/core.
Directive
осигурява същата функционалност за @Directive
декоратора. В Input
декоратор се използва за комуникация между двата компонента. Той изпраща данни от единия компонент към другия, като използва свойството обвързване.
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
стойността е false
точно срещу *ngIf
директивата.
Резултатът от горния кодов фрагмент ще изглежда така.

Надявам се тази статия да отговори на повечето от въпросите ви относно Angular директиви. Ако имате някакви въпроси или съмнения, не се колебайте да се свържете с мен в полето за коментари.