Directive — Angular | Spec-Zone.ru

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

API

@ Directive({
  selector?: string | undefined;
  inputs?:
    | (
        | string
        | {
            name: string;
            alias?: string | undefined;
            required?: boolean | undefined;
            transform?: ((value: any) => any) | undefined;
          }
      )[]
    | undefined;
  outputs?: string[] | undefined;
  providers?: Provider[] | undefined;
  exportAs?: string | undefined;
  queries?: { [key: string]: any } | undefined;
  host?: { [key: string]: string } | undefined;
  jit?: true | undefined;
  standalone?: boolean | undefined;
  hostDirectives?:
    | (
        | Type<unknown>
        | {
            directive: Type<unknown>;
            inputs?: string[] | undefined;
            outputs?: string[] | undefined;
          }
      )[]
    | undefined;
})

selector

string | undefined

CSS-селектор, который идентифицирует эту директиву в шаблоне и запускает создание экземпляра директивы.

Объявите один из следующих вариантов:

element-name: выбор по имени элемента.
.class: выбор по имени класса.
[attribute]: выбор по имени атрибута.
[attribute=value]: выбор по имени и значению атрибута.
:not(sub_selector): выбор, только если элемент не соответствует sub_selector.
selector1, selector2: выбор, если соответствует либо selector1, либо selector2.

Angular позволяет применять директивы только к CSS-селекторам, которые не пересекают границы элементов.

В следующем HTML-шаблоне директива с селектором input[type=text] будет создана только для элемента <input type="text">.

<form>
  <input type="text">
  <input type="radio">
<form>

inputs

(string | { name: string; alias?: string | undefined; required?: boolean | undefined; transform?: ((value: any) => any) | undefined; })[] | undefined

Перечисляет набор входных свойств директивы, привязанных к данным.

Angular автоматически обновляет входные свойства во время обнаружения изменений. Свойство inputs принимает строки или литералы объектов, которые настраивают свойства директивы, доступные в качестве входных.

Если передан литерал объекта, свойство name указывает, в какое свойство класса следует записывать входное значение, а свойство alias задаёт имя, под которым входное свойство будет доступно в привязках шаблона. Свойство required указывает, что входное значение обязательно; если при использовании директивы оно не передано, возникнет ошибка компиляции.

Если в массив inputs передана строка, она может иметь формат 'name' или 'name: alias', где name — свойство класса, в которое директива должна записывать значение, а alias задаёт имя, под которым входное свойство будет доступно в привязках шаблона. Предполагается, что входные свойства, заданные в виде строк, являются необязательными.

outputs

string[] | undefined

Перечисляет набор выходных свойств, привязанных к событиям.

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

Свойство outputs задаёт набор directiveProperty для конфигурации alias:

directiveProperty указывает свойство компонента, генерирующее события.
alias указывает свойство DOM, к которому привязан обработчик события.

providers

Provider[] | undefined

Настраивает инжектор этой директивы или компонента с помощью токена, сопоставленного с поставщиком зависимости.

exportAs

string | undefined

Задаёт имя, с помощью которого эту директиву можно присвоить переменной в шаблоне.

queries

{ [key: string]: any; } | undefined

Настраивает запросы, которые будут внедрены в директиву.

Запросы содержимого устанавливаются до вызова обратного вызова ngAfterContentInit. Запросы представления устанавливаются до вызова обратного вызова ngAfterViewInit.

host

{ [key: string]: string; } | undefined

Сопоставляет свойства класса с привязками свойств, атрибутов и событий хост-элемента с помощью набора пар «ключ-значение».

Angular автоматически проверяет привязки свойств хоста во время обнаружения изменений. Если привязка меняется, Angular обновляет хост-элемент директивы.

Если ключ является свойством хост-элемента, значение свойства передаётся указанному свойству DOM.

Если ключ является статическим атрибутом DOM, значение атрибута передаётся указанному свойству хост-элемента.

Для обработки событий:

Ключ — это событие DOM, которое прослушивает директива. Для добавления префикса к имени события можно использовать глобальные цели document:, window: и body:.
Значение — это инструкция, выполняемая при возникновении события. Если инструкция возвращает false, для события DOM применяется preventDefault. В методе-обработчике можно обратиться к локальной переменной $event.

jit

true | undefined

Если этот параметр указан, компилятор AOT игнорирует данную директиву или компонент. Они остаются в распространяемом коде, а компилятор JIT пытается скомпилировать их во время выполнения в браузере. Для корректной работы приложение должно импортировать @angular/compiler.

standalone

boolean | undefined

Установите standalone в значение false, если хотите импортировать директиву в NgModule.

hostDirectives

(Type<unknown> | { directive: Type<unknown>; inputs?: string[] | undefined; outputs?: string[] | undefined; })[] | undefined

Автономные директивы, которые следует применять к хосту при совпадении с данной директивой. По умолчанию входные и выходные свойства хост-директив недоступны на хосте, если они не указаны в свойствах inputs или outputs.

Кроме того, входные и выходные свойства можно переименовать, добавив двоеточие и псевдоним после исходного имени входного или выходного свойства. Например, если директива, применённая с помощью hostDirectives, определяет входное свойство с именем menuDisabled, ему можно задать псевдоним disabled, добавив 'menuDisabled: disabled' в качестве элемента в inputs.

Описание

Параметры предоставляют метаданные конфигурации, определяющие, как директива должна обрабатываться, создаваться и использоваться во время выполнения.

Классы директив, как и классы компонентов, могут реализовывать хуки жизненного цикла, чтобы влиять на конфигурацию и поведение.

Примечания по использованию

Чтобы определить директиву, пометьте класс декоратором и укажите метаданные.

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

@Directive({
  selector: 'my-directive',
})
export class MyDirective {
...
}

Объявление директив

По умолчанию директивы являются автономными, поэтому доступны другим компонентам приложения.

@Directive({
  selector: 'my-directive',
})

Убедитесь, что директивы, помеченные как автономные, ещё не объявлены в NgModule.

** Объявление директивы в NgModule ** Если вы хотите объявить директиву в NgModule, добавьте флаг standalone: false в метаданные декоратора Directive и добавьте директиву в поля declarations и exports вашего NgModule.

@Directive({
  standalone: false,
  selector: 'my-directive',
})
class MyDirective {}

@NgModule({
  declarations: [MyDirective, SomeComponent],
  exports: [MyDirective], // making it available outside of this module
})
class SomeNgModule {}

При объявлении директивы в NgModule убедитесь, что:

директива объявлена ровно в одном NgModule.
директива не является автономной.
вы не объявляете повторно директиву, импортированную из другого модуля.
директива также включена в поле exports, если она должна быть доступна компонентам за пределами NgModule.

Директива

API

Описание

Примечания по использованию

Объявление директив