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

在《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
}
複製代碼

---

轉載請註明出處，謝謝！