Angular學習筆記（四） - Angular Renderer (渲染器)

Angular Renderer (渲染器)

---

什麼是渲染器

渲染器是 Angular 爲咱們提供的一種內置服務，用於執行 UI 渲染操做。在瀏覽器中，渲染是將模型映射到視圖的過程。模型的值能夠是 JavaScript 中的原始數據類型、對象、數組或其它的數據對象。然而視圖能夠是頁面中的段落、表單、按鈕等其餘元素，這些頁面元素內部使用 DOM (Document Object Model) 來表示。

Angular Renderer

• RootRenderer

export abstract class RootRenderer {
  abstract renderComponent(componentType: RenderComponentType): Renderer;
}
複製代碼

• Renderer

/** * @deprecated Use the `Renderer2` instead. */
export abstract class Renderer {
  abstract createElement(parentElement: any, name: string, 
    debugInfo?: RenderDebugInfo): any;
  abstract createText(parentElement: any, value: string, 
    debugInfo?: RenderDebugInfo): any;
  abstract listen(renderElement: any, name: string, callback: Function): Function;
  abstract listenGlobal(target: string, name: string, callback: Function): Function;
  abstract setElementProperty(renderElement: any, propertyName: string, propertyValue: 
    any): void;
  abstract setElementAttribute(renderElement: any, attributeName: string, 
    attributeValue: string): void;
  // ...
}
複製代碼

• Renderer2

export abstract class Renderer2 {
  abstract createElement(name: string, namespace?: string|null): any;
  abstract createComment(value: string): any;
  abstract createText(value: string): 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;
}
複製代碼

須要注意的是在 Angular 6 版本，咱們使用 Renderer2 替代 Renderer。經過觀察 Renderer 相關的抽象類 (Renderer、Renderer2)，咱們發現抽象類中定義了不少抽象方法，用來建立元素、文本、設置屬性、添加樣式和設置事件監聽等。

使用 Renderer

@Component({
  selector: 'exe-renderer',
  template: ` <h3>Renderer Component</h3> `
})
export class ExeComponent {
  constructor(private renderer: Renderer2, el: ElementRef) {
    this.renderer.setProperty(el.nativeElement, 'author', 'danwang');
  }
}
複製代碼

以上代碼中，咱們利用構造注入的方式，注入 Renderer2 和 ElementRef 實例。

實例

在開發中，咱們都比較喜歡用jQuery，由於jQuery操做dom很方便，如今用Renderer2來建立方法也能夠很方便的操做DOM

• 一個給angular中組件移除class的方法

private removeClass(el: HTMLElement, classMap: object, renderer: Renderer2): void {
    for (const i in classMap) {
      if (classMap.hasOwnProperty(i)) {
        renderer.removeClass(el, i);
      }
    }
  }
複製代碼

• 添加class方法

private addClass(el: HTMLElement, classMap: object, renderer: Renderer2): void {
    for (const i in classMap) {
      if (classMap.hasOwnProperty(i)) {
        if (classMap[ i ]) {
          renderer.addClass(el, i);
        }
      }
    }
  }
複製代碼