首頁 > web前端 > js教程 > 在angular2中取得節點的方法

在angular2中取得節點的方法

小云云
發布: 2017-12-18 13:23:16
原創
2591 人瀏覽過

在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內建屬性裝飾器@ViewChild

ts:


#

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元素

步驟分解:

第一步:給要取得的元素一個ng-model變量,並且綁定事件啦!


複製程式碼

程式碼如下:

  //給要取得的元素一個ng-model變數

第二步:在controller中利用$event.target取得dom元素即可!

相關推薦:

######JS取得節點的兄弟,父級,子級元素的方法_javascript技巧## ##########jQuery取得節點和子節點文字的方法_jquery#############jquery取得節點名稱_jquery######

以上是在angular2中取得節點的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板