Renderer2

Extend this base class to implement custom rendering. By default, Angular renders a template into DOM. You can use custom rendering to intercept rendering calls, or to render to something other than DOM.

扩展此基类以实现自定义渲染器。默认情况下,Angular 会把模板渲染成 DOM。 你可以使用自定义渲染器来拦截渲染类调用,或用于渲染一些非 DOM 的东西。

abstract class Renderer2 { abstract get data: {...} destroyNode: ((node: any) => void) | null abstract destroy(): void abstract createElement(name: string, namespace?: string | null): any abstract createComment(value: string): any abstract createText(value: string): any abstract appendChild(parent: any, newChild: any): void abstract insertBefore(parent: any, newChild: any, refChild: any): void abstract removeChild(parent: any, oldChild: any): void abstract selectRootElement(selectorOrNode: string | any): any abstract parentNode(node: any): any abstract nextSibling(node: any): any abstract setAttribute(el: any, name: string, value: string, namespace?: string | null): void abstract removeAttribute(el: any, name: string, namespace?: string | null): 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): void abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void abstract setProperty(el: any, name: string, value: any): void abstract setValue(node: any, value: string): void abstract listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void }

说明

Create your custom renderer using RendererFactory2.

使用 RendererFactory2 创建你的自定义渲染器。

Use a custom renderer to bypass Angular's templating and make custom UI changes that can't be expressed declaratively. For example if you need to set a property or an attribute whose name is not statically known, use the setProperty() or setAttribute() method.

使用自定义渲染器可以绕过 Angular 的模板机制,并进行无法以声明式语法表达的自定义 UI 变更。 比如,如果你要设置无法静态得知名称的 Property 或 Attribute,可以使用 setProperty()setAttribute() 方法。

属性

属性名类型说明
data只读

Use to store arbitrary developer-defined data on a renderer instance, as an object containing key-value pairs. This is useful for renderers that delegate to other renderers.

用于在渲染器实例上以 key-value 对象的形式保存任意自定义数据。 这对于要委托给其它渲染器的渲染器很有用。

destroyNode

If null or undefined, the view engine won't call it. This is used as a performance optimization for production mode.

如果为 null 或 undefined,视图引擎就不会调用它。 用于在产品模式下进行优化。

方法

Implement this callback to destroy the renderer or the host element.

实现此回调以便销毁渲染器或其宿主元素。

abstract destroy(): void

参数

没有参数。

返回值

void

Implement this callback to create an instance of the host element.

实现此回调以便创建宿主元素的实例。

abstract createElement(name: string, namespace?: string | null): any

参数

name

An identifying name for the new element, unique within the namespace.

对新元素的标识名,在指定的命名空间内应该是唯一的。

namespace

The namespace for the new element.

新元素的命名空间。

可选. 默认值是 undefined.

返回值

any: The new element.

新元素。

Implement this callback to add a comment to the DOM of the host element.

实现此回调以便向宿主元素的 DOM 中添加一个注释。

abstract createComment(value: string): any

参数

value

The comment text.

注释文本。

返回值

any: The modified element.

修改后的元素。

Implement this callback to add text to the DOM of the host element.

实现此回调以便向宿主元素的 DOM 中添加文本。

abstract createText(value: string): any

参数

value

The text string.

文本字符串。

返回值

any: The modified element.

修改后的元素。

Appends a child to a given parent node in the host element DOM.

把子元素追加到宿主元素 DOM 中的指定父节点下。

abstract appendChild(parent: any, newChild: any): void

参数

parent

The parent node.

父节点。

newChild

The new child node.

新的子节点。

返回值

void

Implement this callback to insert a child node at a given position in a parent node in the host element DOM.

实现此回调,以便往宿主元素中父节点的指定位置插入一个子节点。

abstract insertBefore(parent: any, newChild: any, refChild: any): void

参数

parent

The parent node.

父节点。

newChild

The new child nodes.

新的子节点。

refChild

The existing child node that should precede the new node.

将位于新节点之前的现有节点。

返回值

void

Implement this callback to remove a child node from the host element's DOM.

实现此回调以便从宿主元素的 DOM 中移除一个子节点。

abstract removeChild(parent: any, oldChild: any): void

参数

parent

The parent node.

父节点。

oldChild

The child node to remove.

要移除的子节点。

返回值

void

Implement this callback to prepare an element to be bootstrapped as a root element, and return the element instance.

实现此回调以准备将其作为根元素进行引导的元素,返回该元素的实例。

abstract selectRootElement(selectorOrNode: string | any): any

参数

selectorOrNode

The DOM element.

DOM 元素。

返回值

any: The root element.

根元素。

Implement this callback to get the parent of a given node in the host element's DOM.

实现此回调以获得宿主元素的 DOM 中指定节点的父节点。

abstract parentNode(node: any): any

参数

node

The child node to query.

要查询的子节点。

返回值

any: The parent node, or null if there is no parent. For WebWorkers, always returns true. This is because the check is synchronous, and the caller can't rely on checking for null.

它的父节点,如果没有父节点则为 null。 对于 WebWorkers,总是返回 true。 这是因为该检查是同步的,该调用者不能依赖于检查 null。

Implement this callback to get the next sibling node of a given node in the host element's DOM.

实现此回调,以获得宿主元素的 DOM 中指定节点的下一个兄弟节点。

abstract nextSibling(node: any): any

参数

node

Type: any.

返回值

any: The sibling node, or null if there is no sibling. For WebWorkers, always returns a value. This is because the check is synchronous, and the caller can't rely on checking for null.

它的兄弟节点,如果没有兄弟节点则为 null。 对于 WebWorkers,总是返回 true。 这是因为该检查是同步的,该调用者不能依赖于检查 null。

Implement this callback to set an attribute value for an element in the DOM.

实现此回调以便在 DOM 中设置指定元素的属性值。

abstract setAttribute(el: any, name: string, value: string, namespace?: string | null): void

参数

el

The element.

目标元素。

name

The attribute name.

属性名。

value

The new value.

新值。

namespace

The namespace.

命名空间。

可选. 默认值是 undefined.

返回值

void

Implement this callback to remove an attribute from an element in the DOM.

实现此回调以便从 DOM 中某个元素上移除一个属性。

abstract removeAttribute(el: any, name: string, namespace?: string | null): void

参数

el

The element.

目标元素。

name

The attribute name.

属性名。

namespace

The namespace.

命名空间。

可选. 默认值是 undefined.

返回值

void

Implement this callback to add a class to an element in the DOM.

实现此回调,以便为 DOM 中的某个元素添加一个 CSS 类。

abstract addClass(el: any, name: string): void

参数

el

The element.

目标元素。

name

The class name.

CSS 类名。

返回值

void

Implement this callback to remove a class from an element in the DOM.

实现此回调,以便从 DOM 中的某个元素上移除一个 CSS 类。

abstract removeClass(el: any, name: string): void

参数

el

The element.

目标元素。

name

The class name.

CSS 类名。

返回值

void

Implement this callback to set a CSS style for an element in the DOM.

实现此回调函数,以便为 DOM 中的某个元素设置 CSS 样式。

abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void

参数

el

The element.

目标元素。

style

The name of the style.

样式名。

value

The new value.

新值。

flags

Flags for style variations. No flags are set by default.

样式的修饰符标志。默认没有任何标志。

可选. 默认值是 undefined.

返回值

void

Implement this callback to remove the value from a CSS style for an element in the DOM.

实现此回调,以便从 DOM 中某个元素上移除一个 CSS 样式值。

abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void

参数

el

The element.

目标元素。

style

The name of the style.

样式名。

flags

Flags for style variations to remove, if set. ???

要移除的样式修饰符标志。

可选. 默认值是 undefined.

返回值

void

Implement this callback to set the value of a property of an element in the DOM.

实现此回调,以便设置 DOM 中某个元素的属性值。

abstract setProperty(el: any, name: string, value: any): void

参数

el

The element.

目标元素。

name

The property name.

属性名。

value

The new value.

新值。

返回值

void

Implement this callback to set the value of a node in the host element.

实现本回调,以便在宿主元素中设置节点的值。

abstract setValue(node: any, value: string): void

参数

node

The node.

目标节点。

value

The new value.

新值。

返回值

void

Implement this callback to start an event listener.

实现此回调以启动事件监听器。

abstract listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void

参数

target

The context in which to listen for events. Can be the entire window or document, the body of the document, or a specific DOM element.

要监听事件的上下文。可以是整个窗口或文档、文档的 body 或指定的 DOM 元素。

eventName

The event to listen for.

要监听的事件。

callback

A handler function to invoke when the event occurs.

当该事件发生时要执行的处理器函数。

返回值

() => void: An "unlisten" function for disposing of this handler.

一个 "取消监听" 函数,用于解除该处理器。