Как создать директиву в angular?

Пользователь

от olen.shanahan , в категории: JavaScript , 7 месяцев назад

Как создать директиву в angular?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от cooper.berge , 6 месяцев назад

@olen.shanahan 

Для создания директивы в Angular нужно выполнить следующие шаги:

  1. Создайте новый файл с расширением ".directive.ts" (например, myDirective.directive.ts), где будет храниться код вашей директивы.
  2. Внутри этого файла определите класс, который будет представлять вашу директиву. Для этого класса используйте декоратор @Directive из пакета @angular/core.


Пример кода для создания простой директивы:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { Directive, ElementRef } from '@angular/core';

@Directive({
    selector: '[myDirective]'
})

export class MyDirective {
    constructor(private elementRef: ElementRef) {
        // В конструкторе принимаем ElementRef для доступа к элементу, к которому будет применяться директива
        this.elementRef.nativeElement.style.backgroundColor = 'yellow';
    }
}


  1. Зарегистрируйте вашу директиву в модуле приложения. Для этого импортируйте класс директивы и добавьте его в секцию "declarations" в конфигурации NgModule.


Пример кода для регистрации директивы в модуле:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { NgModule } from '@angular/core';
import { MyDirective } from './myDirective.directive';

@NgModule({
    declarations: [
        MyDirective
    ],
    ...
})
export class AppModule { }


  1. Используйте вашу директиву в HTML-шаблоне компонента или другой директивы с помощью атрибута "myDirective".


Пример использования директивы в компоненте:

1
2
3
<div myDirective>
    Этот текст будет иметь желтый фон.
</div>


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