扩展此基类以实现自定义渲染器。默认情况下,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, isMove?: boolean): 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. |
方法
|
---|
实现此回调以便销毁渲染器或其宿主元素。 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): 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.
|
|
---|
实现此回调以便向宿主元素的 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.
|
|
---|
实现此回调以便向宿主元素的 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.
|
|
---|
把子元素追加到宿主元素 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
|
|
---|
实现此回调,以便往宿主元素中父节点的指定位置插入一个子节点。 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, isMove?: boolean): void
参数 parent | any | 父节点。 The parent node. | newChild | any | 新的子节点。 The new child nodes. | refChild | any | 将会插入在这个新节点之前的现有节点。 The existing child node before which newChild is inserted. | isMove | boolean | 可选参数,指示当前的 insertBefore 是否是移动的结果。动画使用此信息来触发移动动画。过去,Animation 始终假定任何 insertBefore 都是一次移动。但严格来说这是不正确的,因为在支持 i18n 的运行环境中,可以调用 insertBefore ,而不应触发移动动画。 Optional argument which signifies if the current insertBefore is a result of a move. Animation uses this information to trigger move animations. In the past the Animation would always assume that any insertBefore is a move. This is not strictly true because with runtime i18n it is possible to invoke insertBefore as a result of i18n and it should not trigger an animation move. 可选. 默认值是 `undefined`. |
返回值void
|
|
---|
实现此回调以便从宿主元素的 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
|
|
---|
实现此回调以准备将其作为根元素进行引导的元素,返回该元素的实例。 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.
|
|
---|
实现此回调以获得宿主元素的 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.
|
|
---|
实现此回调,以获得宿主元素的 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
参数返回值它的兄弟节点,如果没有兄弟节点则为 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.
|
|
---|
实现此回调以便在 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
|
|
---|
实现此回调以便从 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
|
|
---|
实现此回调,以便为 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
|
|
---|
实现此回调,以便从 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
|
|
---|
实现此回调函数,以便为 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
|
|
---|
实现此回调,以便从 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
|
|
---|
实现此回调,以便设置 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
|
|
---|
实现本回调,以便在宿主元素中设置节点的值。 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
|
|
---|
实现此回调以启动事件监听器。 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.
|