angular4 @ViewChild ElementRef renderer

angular4 @ViewChild ElementRef renderer2

angular 如何操做 DOM ? 這是一個問題, 熟練了 Jquery 就會想引入 Jquery 去操做, 可是這不是一個好辦法.

先看看看 ElementRef 和 renderer2 是否知足你的需求:

選擇組件內節點

<!--視圖  -->
<div #mydiv><input></div>

// 選擇, 括號中的'mydiv'對應 模板中的 #mydiv ,  mydiv: ElementRef 爲本組件類的對象

@ViewChild('mydiv') mydiv: ElementRef

// 若是選擇子組件直接寫組件名,如:

@ViewChild(MatMenuTrigger) userIcon: MatMenuTrigger;

// 返回原生節點
let el = this.mydiv.nativeElement // 

要想有提示斷言一下便可, 改爲:

let el:HTMLElement = <HTMLElement>this.mydiv.nativeElement 

// 使用原生方法
let ipt = el.querySelector('input')

@ViewChild @ContentChild @ViewChildren @ContentChildren 又是什麼

@ViewChild 選擇組件模板內的節點, 類型 ElementRef 或子組件

@ContentChild 選擇當前組件引用的子組件 @ContentChild(組件名)

這兩哥們看起來是同樣的, 區別在於ViewChild選擇Shadow DOM, ContentChild 選擇 Light DOM,通常狀況下用ViewChild就ok了, 有關ShadowDom參見 https://developer.mozilla.org...

@ViewChildren 和 @ContentChildren 則爲對應的複數 類型:QueryList<ElementRef>

renderer2

// 添加類
this.renderer2.addClass(el, 'active')
// 移除了類
this.renderer2.removeClass(el, 'active')
// 設置樣式
this.renderer2.setStyle(el, 'height', '10px')
// 移除樣式
this.renderer2.removeStyle(el, 'height')
// 設置屬性
this.renderer2.setAttribute(el, 'data-id', 'id')
// 移除屬性
this.renderer2.removeAttribute(el, 'data-id')
// 設置值
this.renderer2.setValue(ipt, 'some str')
// 監聽事件
this.renderer2.listen(el, 'click', (e)=>{console.log(e)}) //el|'window'|'document'|'body'

// 其餘相似
createElement 建立元素
createComment 動態建立組件
createText 建立文本節點
destroyNode 銷燬節點
appendChild 插入子節點
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

雖然大面積地操做dom沒有 Jquery 方便, 好比要作一個編輯器, 可是常規的用途建議使用 renderer2 而不是 引入Jquery