在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'的节点 } }下面有一個最佳化方案,運用angular內建屬性裝飾器@ViewChildts:
#
import{ Component, ElementRef, ViewChild, AfterViewInit }from'@angular/core'; exportclassAppComponent{ @ViewChild('greet') greetp: ElementRef; ngAfterViewInit() {this.greetp.nativeElement.style.backgroundColor ='red'; } }html:
<p #greet>hello world</p> //element的标识"#name",@ViewChild根据这个搜索元素
angular中怎麼取得dom元素
步驟分解:
程式碼如下:
8efe8b80991594a3cf60db722e497dce94b3e26ee717c64999d7867364b1b4a3 //給要取得的元素一個ng-model變數
第二步:在controller中利用$event.target取得dom元素即可!
######JS取得節點的兄弟,父級,子級元素的方法_javascript技巧## ##########jQuery取得節點和子節點文字的方法_jquery#############jquery取得節點名稱_jquery######以上是在angular2中取得節點的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!