API 参考手册
API > @angular/core

Renderer2

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

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.

查看"说明"...

abstract class Renderer2 { abstract data: {...} destroyNode: ((node: any) => void) | null abstract destroy(): void abstract createElement(name: string, namespace?: string): 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: any, preserveContent?: boolean): any abstract parentNode(node: any): any abstract nextSibling(node: any): any abstract setAttribute(el: any, name: string, value: string, namespace?: string): void abstract removeAttribute(el: any, name: string, namespace?: string): 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: any, eventName: string, callback: (event: any) => boolean | void): () => void }
      
      abstract class Renderer2 {
  abstract data: {...}
  destroyNode: ((node: any) => void) | null
  abstract destroy(): void
  abstract createElement(name: string, namespace?: string): 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: any, preserveContent?: boolean): any
  abstract parentNode(node: any): any
  abstract nextSibling(node: any): any
  abstract setAttribute(el: any, name: string, value: string, namespace?: string): void
  abstract removeAttribute(el: any, name: string, namespace?: string): 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: any, eventName: string, callback: (event: any) => boolean | void): () => void
}

说明

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

Create your custom renderer using RendererFactory2.

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

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.

属性

属性说明
abstract data: { [key: string]: any; } 只读

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

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.

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

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

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

方法

destroy()

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

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

abstract destroy(): void
      
      abstract destroy(): void
参数

没有参数。

返回值

void

createElement()

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

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

abstract createElement(name: string, namespace?: string): any
      
      abstract createElement(name: string, namespace?: string): any
参数
name string

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

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

namespace string

新元素的命名空间。

The namespace for the new element.

可选. 默认值是 undefined.

返回值

新元素。

any: The new element.

createComment()

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

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

abstract createComment(value: string): any
      
      abstract createComment(value: string): any
参数
value string

注释文本。

The comment text.

返回值

修改后的元素。

any: The modified element.

createText()

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

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

abstract createText(value: string): any
      
      abstract createText(value: string): any
参数
value string

文本字符串。

The text string.

返回值

修改后的元素。

any: The modified element.

appendChild()

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

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

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

父节点。

The parent node.

newChild any

新的子节点。

The new child node.

返回值

void

insertBefore()

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

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
      
      abstract insertBefore(parent: any, newChild: any, refChild: any): void
参数
parent any

父节点。

The parent node.

newChild any

新的子节点。

The new child nodes.

refChild any

将会插入在这个新节点之前的现有节点。

The existing child node that should precede the new node.

返回值

void

removeChild()

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

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

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

父节点。

The parent node.

oldChild any

要移除的子节点。

The child node to remove.

返回值

void

selectRootElement()

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

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

abstract selectRootElement(selectorOrNode: any, preserveContent?: boolean): any
      
      abstract selectRootElement(selectorOrNode: any, preserveContent?: boolean): any
参数
selectorOrNode any

DOM 元素。

The DOM element.

preserveContent boolean

根元素的内容是应该保留还是在启动期间清除（默认行为）。 和 ViewEncapsulation.ShadowDom 联用以支持使用 <slot> 元素进行简单的原生内容投影。

Whether the contents of the root element should be preserved, or cleared upon bootstrap (default behavior). Use with ViewEncapsulation.ShadowDom to allow simple native content projection via <slot> elements.

可选. 默认值是 undefined.

返回值

根元素。

any: The root element.

parentNode()

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

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

abstract parentNode(node: any): any
      
      abstract parentNode(node: any): any
参数
node any

要查询的子节点。

The child node to query.

返回值

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

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.

nextSibling()

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

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

abstract nextSibling(node: any): any
      
      abstract nextSibling(node: any): any
参数
node any
返回值

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

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.

setAttribute()

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

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

abstract setAttribute(el: any, name: string, value: string, namespace?: string): void
      
      abstract setAttribute(el: any, name: string, value: string, namespace?: string): void
参数
el any

目标元素。

The element.

name string

属性名。

The attribute name.

value string

新值。

The new value.

namespace string

命名空间。

The namespace.

可选. 默认值是 undefined.

返回值

void

removeAttribute()

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

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

abstract removeAttribute(el: any, name: string, namespace?: string): void
      
      abstract removeAttribute(el: any, name: string, namespace?: string): void
参数
el any

目标元素。

The element.

name string

属性名。

The attribute name.

namespace string

命名空间。

The namespace.

可选. 默认值是 undefined.

返回值

void

addClass()

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

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

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

目标元素。

The element.

name string

CSS 类名。

The class name.

返回值

void

removeClass()

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

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

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

目标元素。

The element.

name string

CSS 类名。

The class name.

返回值

void

setStyle()

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

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

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

目标元素。

The element.

style string

样式名。

The name of the style.

value any

新值。

The new value.

flags RendererStyleFlags2

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

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

可选. 默认值是 undefined.

返回值

void

removeStyle()

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

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

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

目标元素。

The element.

style string

样式名。

The name of the style.

flags RendererStyleFlags2

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

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

可选. 默认值是 undefined.

返回值

void

setProperty()

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

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

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

目标元素。

The element.

name string

属性名。

The property name.

value any

新值。

The new value.

返回值

void

setValue()

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

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

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

目标节点。

The node.

value string

新值。

The new value.

返回值

void

listen()

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

Implement this callback to start an event listener.

abstract listen(target: any, eventName: string, callback: (event: any) => boolean | void): () => void
      
      abstract listen(target: any, eventName: string, callback: (event: any) => boolean | void): () => void
参数
target any

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

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.

eventName string

要监听的事件。

The event to listen for.

callback (event: any) => boolean | void

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

A handler function to invoke when the event occurs.

返回值

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

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