獲取DOM元素的正確方法

我有一個獨特的情況正在進行。我使用Angular 2和Ionic 2來製作手機應用程序。我需要獲取其中一個Ionic 2組件的DOM元素，以在其innerHTML屬性中插入一些html。獲取DOM元素的正確方法

如何做到這一點的角2？我根本無法訪問此組件，因爲它是Ionic的組件之一。更具體地說，它是toast組件，我將它初始化爲一個Typescript函數，但是我無法獲取創建的DOM元素。

我可以包括jQuery和容易得到我需要的組件的DOM元素，但我讀了其中的JQuery在角2的應用程序是不好的做法。

我擡起頭來使用ViewChild，但只有在你已經制成的部件的工作原理。由於這是Ionic 2附帶的組件，並且我沒有創建該組件，因此我不能使用ViewChild來獲取它的ElementRef。

編輯：我忘了說，當離子2插入toast元素它插入身體的孩子。所以它在我的組件之外的組件樹之外，我不能使用類似ContentChild的東西來搜索後代，因爲它不是後代。

所以，我怎樣才能使用剛剛角2此組件的DOM元素？

來源

2016-11-29 Graham

怎麼樣'ContentChild）'？ ContentChild允許搜索後代。 –

@GünterZöchbauer查看我上面的修改。我忘了提及，當Ionic 2插入吐司元素時，它被插入到身體上。所以它不是我組件樹中的後代。 – Graham

我不知道離子或什麼烤麪包支持。你可以通過組件來祝酒嗎？你可以傳遞什麼內容給敬酒展示？ –

所以我解決了我自己的問題。昨天晚上，我開始思考Angular 2如何不必使用JQuery或document對象，因爲您製作的每個組件都可以訪問它自己的DOM元素以及它的所有子元素。

問題是，當通過編程方式在Typescript中創建一個吐司時，它不會插入到您自己的組件之一中，而是插入由Ionic創建的組件樹的另一個分支中。問題在於，你無法訪問這個單獨的分支（或者我認爲）。

然後我想，如果我在設計框架，我的用戶需要偶爾訪問這棵樹，或者至少需要訪問它們創建的單個元素。所以我進入了Ionic 2 API並看着toast。這裏沒有定義任何功能，或者有任何東西會返回ElementRef。

我一直在想，它在那裏。 Ionic不會像這樣將用戶置於寒冷中。所以我去看看source code在github上的toast。如果您點擊該鏈接，您會注意到Toast類擴展了另一個名爲ViewController的類。而ViewController類具有一個名爲pageRef()的公共函數。那麼這將返回組件的ElementRef。

由於Toast類擴展了ViewController，因此Toast也可以訪問pageRef()。所以爲了得到ElementRef的乾杯，我只需要寫toast.pageRef()。

然後解決自己的問題，所有我所要做的就是寫下面的一行：

toast.pageRef().nativeElement.getElementsByClassName('toast-message')[0].innerHTML = message;

無需JQuery的或使用document對象。

以編程方式創建並插入樹中的Ionic中的每個元素都與您自己的組件樹分離，從而擴展了ViewController類。因此，對於警報，彈出窗口和許多其他組件，您也可以使用pageRef()函數。

來源

2016-11-30 16:20:32 Graham

非常感謝您分享您的調查！ –

如何使用普通的舊Javascript？我知道這不是最美麗的東西，但它是一個解決方案，你不必導入一個外部庫（jQuery）。只需declare var document在您的文件上，然後：document.getElementsByTagName("ion-toast")[0].innerHTML當然，如果只有一個。另外，請注意，當吐司被解散時，該元素將從DOM中移除，並且不能再以這種方式訪問它。另外，如果它不在屏幕中，它將無法在DOM中訪問。

希望這對你有所幫助。

來源

2016-11-29 17:25:18 Jorge

獲取DOM元素的正確方法

回答

相關問題