Renderer2 — Angular | Spec-Zone.ru

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

API

abstract class Renderer2 {
  abstract readonly data: { [key: string]: any; };
  abstract destroy(): void;
  abstract createElement(name: string, namespace?: string | null | undefined): any;
  abstract createComment(value: string): any;
  abstract createText(value: string): any;
  destroyNode: ((node: any) => void) | null;
  abstract appendChild(parent: any, newChild: any): void;
  abstract insertBefore(parent: any, newChild: any, refChild: any, isMove?: boolean | undefined): void;
  abstract removeChild(parent: any, oldChild: any, isHostElement?: boolean | undefined, requireSynchronousElementRemoval?: boolean | undefined): void;
  abstract selectRootElement(selectorOrNode: any, preserveContent?: boolean | undefined): any;
  abstract parentNode(node: any): any;
  abstract nextSibling(node: any): any;
  abstract setAttribute(el: any, name: string, value: string, namespace?: string | null | undefined): void;
  abstract removeAttribute(el: any, name: string, namespace?: string | null | undefined): void;
  abstract addClass(el: any, name: string): void;
  abstract removeClass(el: any, name: string): void;
  abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2 | undefined): void;
  abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2 | undefined): void;
  abstract setProperty(el: any, name: string, value: any): void;
  abstract setValue(node: any, value: string): void;
  abstract listen(target: any, eventName: string, callback: (event: any) => boolean | void, options?: ListenerOptions | undefined): () => void;
}

data

{ [key: string]: any; }

Используется для хранения произвольных данных, определенных разработчиком, в экземпляре рендерера в виде объекта с парами «ключ — значение». Это полезно для рендереров, делегирующих задачи другим рендерерам.

destroy

void

Реализуйте этот обратный вызов, чтобы уничтожить рендерер или хост-элемент.

@returnsvoid

createElement

any

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

@paramnamestring

Идентифицирующее имя нового элемента, уникальное в пределах пространства имен.

@paramnamespacestring | null | undefined

Пространство имен нового элемента.

@returnsany

Новый элемент.

createComment

any

Реализуйте этот обратный вызов, чтобы добавить комментарий в DOM хост-элемента.

@paramvaluestring

Текст комментария.

@returnsany

Измененный элемент.

createText

any

Реализуйте этот обратный вызов, чтобы добавить текст в DOM хост-элемента.

@paramvaluestring

Текстовая строка.

@returnsany

Измененный элемент.

destroyNode

((node: any) => void) | null

Если значение равно null или undefined, механизм представлений не будет вызывать этот метод. Это используется для оптимизации производительности в рабочем режиме.

appendChild

void

Добавляет дочерний узел к указанному родительскому узлу в DOM хост-элемента.

@paramparentany

Родительский узел.

@paramnewChildany

Новый дочерний узел.

@returnsvoid

insertBefore

void

Реализуйте этот обратный вызов, чтобы вставить дочерний узел в указанную позицию родительского узла в DOM хост-элемента.

@paramparentany

Родительский узел.

@paramnewChildany

Новые дочерние узлы.

@paramrefChildany

Существующий дочерний узел, перед которым вставляется newChild.

@paramisMoveboolean | undefined

Необязательный аргумент, указывающий, является ли текущий insertBefore результатом перемещения. Анимация использует эту информацию для запуска анимаций перемещения. Ранее механизм анимации всегда считал, что любой insertBefore является перемещением. Это не совсем верно, поскольку при использовании i18n во время выполнения insertBefore может быть вызван в результате i18n, и это не должно запускать анимацию перемещения.

@returnsvoid

removeChild

void

Реализуйте этот обратный вызов, чтобы удалить дочерний узел из DOM хост-элемента.

@paramparentany

Родительский узел.

@paramoldChildany

Дочерний узел, который нужно удалить.

@paramisHostElementboolean | undefined

Необязательный сигнал рендереру о том, является ли этот элемент хост-элементом

@paramrequireSynchronousElementRemovalboolean | undefined

Необязательный сигнал рендереру о том, требуется ли синхронное удаление этого элемента

@returnsvoid

selectRootElement

any

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

@paramselectorOrNodeany

Элемент DOM.

@parampreserveContentboolean | undefined

Следует ли сохранять содержимое корневого элемента или очищать его при инициализации (поведение по умолчанию). Используйте вместе с ViewEncapsulation.ShadowDom, чтобы обеспечить простую проекцию содержимого с помощью собственных элементов <slot>.

@returnsany

Корневой элемент.

parentNode

any

Реализуйте этот обратный вызов, чтобы получить родительский узел заданного узла в DOM хост-элемента.

@paramnodeany

Дочерний узел, который нужно проверить.

@returnsany

Родительский узел или null, если родителя нет. Проверка выполняется синхронно, поэтому вызывающий код не может полагаться на проверку значения null.

nextSibling

any

Реализуйте этот обратный вызов, чтобы получить следующий соседний узел заданного узла в DOM хост-элемента.

@paramnodeany

@returnsany

Соседний узел или null, если соседнего узла нет. Проверка выполняется синхронно, поэтому вызывающий код не может полагаться на проверку значения null.

setAttribute

void

Реализуйте этот обратный вызов, чтобы задать значение атрибута элемента в DOM.

@paramelany

Элемент.

@paramnamestring

Имя атрибута.

@paramvaluestring

Новое значение.

@paramnamespacestring | null | undefined

Пространство имен.

@returnsvoid

removeAttribute

void

Реализуйте этот обратный вызов, чтобы удалить атрибут элемента из DOM.

@paramelany

Элемент.

@paramnamestring

Имя атрибута.

@paramnamespacestring | null | undefined

Пространство имен.

@returnsvoid

addClass

void

Реализуйте этот обратный вызов, чтобы добавить класс элементу в DOM.

@paramelany

Элемент.

@paramnamestring

Имя класса.

@returnsvoid

removeClass

void

Реализуйте этот обратный вызов, чтобы удалить класс элемента из DOM.

@paramelany

Элемент.

@paramnamestring

Имя класса.

@returnsvoid

setStyle

void

Реализуйте этот обратный вызов, чтобы задать стиль CSS для элемента в DOM.

@paramelany

Элемент.

@paramstylestring

Имя стиля.

@paramvalueany

Новое значение.

@paramflagsRendererStyleFlags2 | undefined

Флаги для вариантов стиля. По умолчанию флаги не установлены.

@returnsvoid

removeStyle

void

Реализуйте этот обратный вызов, чтобы удалить значение стиля CSS элемента в DOM.

@paramelany

Элемент.

@paramstylestring

Имя стиля.

@paramflagsRendererStyleFlags2 | undefined

Флаги вариантов стиля, которые нужно удалить, если они установлены. ???

@returnsvoid

setProperty

void

Реализуйте этот обратный вызов, чтобы задать значение свойства элемента в DOM.

@paramelany

Элемент.

@paramnamestring

Имя свойства.

@paramvalueany

Новое значение.

@returnsvoid

setValue

void

Реализуйте этот обратный вызов, чтобы задать значение узла в хост-элементе.

@paramnodeany

Узел.

@paramvaluestring

Новое значение.

@returnsvoid

listen

() => void

Реализуйте этот обратный вызов, чтобы добавить прослушиватель событий.

@paramtargetany

Контекст, в котором нужно прослушивать события. Это может быть всё окно или документ, тело документа либо определенный элемент DOM.

@parameventNamestring

Событие, которое нужно прослушивать.

@paramcallback(event: any) => boolean | void

Функция-обработчик, вызываемая при возникновении события.

@paramoptionsListenerOptions | undefined

Параметры, задающие способ привязки прослушивателя событий.

@returns() => void

Функция «unlisten» для удаления этого обработчика.

Описание

Обратите внимание: использование `Renderer2` для доступа к элементам DOM не обеспечивает дополнительной безопасности и эквивалентно Security vulnerabilities.

Создайте собственный рендерер с помощью RendererFactory2.

Используйте собственный рендерер, чтобы обойти шаблонизацию Angular и вносить пользовательские изменения в интерфейс, которые нельзя выразить декларативно. Например, если необходимо задать свойство или атрибут, имя которого неизвестно статически, используйте метод setProperty() или setAttribute().