Angular開發實踐（七）： 跨平臺操作DOM及渲染器Renderer2

laixiangran發表於2018-04-02
Angular

在《Angular開發實踐（六）：服務端渲染》這篇文章的最後，我們也提到了在服務端渲染中需要牢記的幾件事件，其中就包括不要使用window、 document、 navigator等瀏覽器特有的型別以及直接操作DOM元素。

這樣就引出了 Angular 主要特性之一：橫跨所有平臺。通過合適的方法，使用 Angular 構建的應用，可複用在多種不同平臺的應用上 —— Web、移動 Web、移動應用、原生應用和桌面原生應用。

為了能夠支援跨平臺，Angular 通過抽象層封裝了不同平臺的差異。比如定義了抽象類 Renderer2 、抽象類 RootRenderer 等。此外還定義了以下引用型別：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。通過 模板變數、@ViewChild 等方法獲取DOM元素。

為了演示，先定義一個元件DemoComponent：

import { AfterViewInit, Component, ElementRef, Renderer2, ViewChild } from `@angular/core`;

@Component({
    template: `
        <div id="demoDiv" #demoDiv>this is DIV!</div>
        DIV的id：{{demoDiv.id}} <!-- DIV的id：demoDiv -->
    `
})
export class DemoComponent implements AfterViewInit {
    @ViewChild(`demoDiv`) demoDiv: ElementRef; // @ViewChild通過模板變數名獲取

    constructor(private renderer: Renderer2) {
    }

    ngAfterViewInit() {
        console.log(`DIV的id：` + this.demoDiv.nativeElement.id); // DIV的id：demoDiv
        this.renderer.setStyle(this.demoDiv.nativeElement, `background-color`, `red`); // 通過Renderer2設定div的css樣式background-color
    }
}

獲取元件中的div

在Angular應用中不應該通過原生 API 或者 jQuery 來直接獲取DOM元素：

let element1 = document.getElementById("demoDiv"); // jQuery獲取: $(`#demoDiv`)

而是應該通過Angular提供的方法來獲取DOM元素：

模板變數

<div id="demoDiv" #demoDiv>this is DIV!</div>
DIV的id：{{demoDiv.id}} <!-- DIV的id：demoDiv -->

在元件模板中，我們在 div 上定義了 #demoDiv 的模板變數，那麼 demoDiv 就等於該 div 的 DOM 物件，因此我們可以通過 demoDiv.id 直接獲取 div 的 id。

@ViewChild

@ViewChild(`demoDiv`) demoDiv: ElementRef; // @ViewChild通過模板變數名獲取

ngAfterViewInit() {
    console.log(`DIV的id：` + this.demoDiv.nativeElement.id); // DIV的id：demoDiv
}

在元件類中，我們通過 @ViewChild 獲取到包裝有 div 的 DOM 物件的 ElementRef 物件，ElementRef 定義如下：

class ElementRef<T> {
  constructor(nativeElement: T)
  nativeElement: T
}

因此我們可以在 ngAfterViewInit 中通過 this.demoDiv.nativeElement 獲取到該 div 的 DOM 物件，然後獲取元素的id。

操作元件中的div

在上面通過幾種方式獲取到 div 的 DOM 物件，那麼我們要如果對它進行操作呢（設定樣式、屬性、插入子元素等）？通過原始API 或者 jQuery 肯定是不允許的了。

這樣我們就引出Angular抽象類 Renderer2 來對元素進行設定樣式、屬性、插入子元素等操作。

Renderer2 的定義如下：

class Renderer2 {
    get data: {...}
    destroyNode: ((node: any) => void) | null
    destroy(): void
    createElement(name: string, namespace?: string | null): any // 建立元素
    createComment(value: string): any // 建立註釋元素
    createText(value: string): any // 建立文字元素
    appendChild(parent: any, newChild: any): void // 新增子元素（在最後）
    insertBefore(parent: any, newChild: any, refChild: any): void // 新增子元素（在最前）
    removeChild(parent: any, oldChild: any): void // 移除子元素
    selectRootElement(selectorOrNode: string | any): any // 獲取根元素
    parentNode(node: any): any // 獲取父元素
    nextSibling(node: any): any // 獲取下一個兄弟元素
    setAttribute(el: any, name: string, value: string, namespace?: string | null): void // 設定屬性
    removeAttribute(el: any, name: string, namespace?: string | null): void // 移除屬性
    addClass(el: any, name: string): void // 新增樣式類
    removeClass(el: any, name: string): void // 移除樣式類
    setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void // 設定樣式
    removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void // 移除樣式
    setProperty(el: any, name: string, value: any): void // 設定DOM物件屬性，不同於元素屬性
    setValue(node: any, value: string): void // 設定元素值
    listen(target: `window` | `document` | `body` | any, eventName: string, callback: (event: any) => boolean | void): () => void // 註冊事件
}

因此，我們想改變 div 的背景色，就可以這樣做：

ngAfterViewInit() {
    this.renderer.setStyle(this.demoDiv.nativeElement, `background-color`, `red`); // 通過Renderer2設定div的css樣式background-color
}

相關文章