填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

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, 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.

方法

實現此回呼(Callback)以便銷燬渲染器或其宿主元素。

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

      
      abstract destroy(): void
    
引數

沒有引數。

返回值

void

實現此回呼(Callback)以便建立宿主元素的實例。

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.

實現此回呼(Callback)以便向宿主元素的 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.

實現此回呼(Callback)以便向宿主元素的 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

實現此回呼(Callback),以便往宿主元素中父節點的指定位置插入一個子節點。

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

實現此回呼(Callback)以便從宿主元素的 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

實現此回呼(Callback)以準備將其作為根元素進行引導的元素,返回該元素的實例。

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.

實現此回呼(Callback)以獲得宿主元素的 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.

實現此回呼(Callback),以獲得宿主元素的 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.

實現此回呼(Callback)以便在 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

實現此回呼(Callback)以便從 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

實現此回呼(Callback),以便為 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

實現此回呼(Callback),以便從 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

實現此回呼(Callback)函式,以便為 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

實現此回呼(Callback),以便從 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

實現此回呼(Callback),以便設定 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

實現此回呼(Callback)以啟動事件監聽器。

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.