Renderer2

class

扩展此基类以实现自定义渲染器。默认情况下，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, isHostElement?: boolean): 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.

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`

destroy()

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

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

      
      abstract destroy(): void

参数

没有参数。

返回值

void

createElement()

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

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

      
      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

参数

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

参数

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

参数

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

参数

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, isHostElement?: boolean): void

参数

parent

any

父节点。

The parent node.

oldChild

any

要移除的子节点。

The child node to remove.

isHostElement

boolean

可选值，用于告诉渲染器该元素是否宿主元素

Optionally signal to the renderer whether this element is a host element or not

可选. 默认值是 undefined.

返回值

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

参数

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

参数

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

参数

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

参数

`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

参数

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

参数

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

参数

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

参数

`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

参数

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

参数

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

参数

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

参数

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.

说明link

属性link

方法link

destroy() link

参数

返回值

createElement() link

参数

返回值

createComment() link

参数

返回值

createText() link

参数

返回值

appendChild() link

参数

返回值

insertBefore() link

参数

返回值

removeChild() link

参数

返回值

selectRootElement() link

参数

返回值

parentNode() link

参数

返回值

nextSibling() link

参数

返回值

setAttribute() link

参数

返回值

removeAttribute() link

参数

返回值

addClass() link

参数

返回值

removeClass() link

参数

返回值

setStyle() link

参数

返回值

removeStyle() link

参数

返回值

setProperty() link

参数

返回值

setValue() link

参数

返回值

listen() link

参数

返回值

说明

属性

方法

destroy()

createElement()

createComment()

createText()

appendChild()

insertBefore()

removeChild()

selectRootElement()

parentNode()

nextSibling()

setAttribute()

removeAttribute()

addClass()

removeClass()

setStyle()

removeStyle()

setProperty()

setValue()

listen()