在angular2中ts檔案支援js程式碼,為什麼用document.getElementById沒辦法取得元素節點呢?其實在angular2中先載入ts文件,再載入view,所以取得不到節點。本文主要介紹如何在angular2中取得節點,詳細的介紹了幾種方法,具有一定的參考價值,有興趣的小夥伴們可以參考一下,希望能幫助到大家。
在應用程式層直接操作DOM,就會造成應用層與渲染層之間強耦合,導致我們的應用無法運作在不同環境,如web worker 中,因為在web worker 環境中,是不能直接操作DOM。
透過ElementRef 我們就可以封裝不同平台下視圖層中的native 元素(在瀏覽器環境中,native 元素通常是指DOM 元素),最後借助於Angular 提供的強大的依賴注入特性,我們就可以輕鬆地存取native 元素。
angular2有生命週期鉤子AfterViewInit可以幫助我們在view載入完之後再執行對應的ts
ts:
##
import { Component, ElementRef ,AfterViewInit} from '@angular/core'; exportclassAppComponent { constructor(privateelementRef: ElementRef) { } ngAfterViewInit() { let pEle =this.elementRef.nativeElement.querySelector('p');//获取第一个p console.dir(pEle); let p = doxcument.getElementById("p"); //获取id为‘p'的节点 } }
#
import{ Component, ElementRef, ViewChild, AfterViewInit }from'@angular/core'; exportclassAppComponent{ @ViewChild('greet') greetp: ElementRef; ngAfterViewInit() {this.greetp.nativeElement.style.backgroundColor ='red'; } }
<p #greet>hello world</p> //element的标识"#name",@ViewChild根据这个搜索元素
angular中怎麼取得dom元素
步驟分解:
程式碼如下:
第二步:在controller中利用$event.target取得dom元素即可!
######JS取得節點的兄弟,父級,子級元素的方法_javascript技巧## ##########jQuery取得節點和子節點文字的方法_jquery#############jquery取得節點名稱_jquery######以上是在angular2中取得節點的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!