我有一个独特的情况。我正在使用Angular 2和Ionic 2制作手机应用程序。我需要获取Ionic 2的一个组件的DOM元素，将一些html插入其innerHTML属性。
我如何在Angular 2中执行此操作？我根本无法访问此组件，因为它是Ionic附带的组件之一。更具体地说，它是toast组件，我在Typescript函数中初始化它，但是我无法获得创建的DOM元素。
我可以包含JQuery并轻松获取组件所需的DOM元素，但我读到在Angular 2应用程序中包含JQuery是不好的做法。
我已经使用ViewChild查找，但这只适用于您制作的组件。由于这是Ionic 2附带的组件，而我没有创建组件，因此我无法使用ViewChild来获取其ElementRef。
编辑：我忘了说，当Ionic 2插入toast元素时，它会作为身体的孩子插入。所以它在组件树之外由我的组件构成，我不能使用ContentChild之类的东西来搜索后代，因为它不是后代。
那么如何使用Angular 2获取此组件的DOM元素？
答案 0 :(得分：3)
所以我解决了自己的问题。昨晚我开始思考如何在Angular 2中使用JQuery或document对象，因为你创建的每个组件都可以访问自己的DOM元素及其所有子元素。
问题是当在Typescript中以编程方式创建toast时，它不会插入到您自己的组件中，而是插入到Ionic创建的组件树的不同分支中。而且存在问题，你无法访问这个单独的分支（或者我认为）。
然后我想，如果我正在设计一个框架，我的用户偶尔会需要访问这个树，或者至少需要访问它们在其中创建的各个元素。所以我进入了Ionic 2 API并查看了toast。在那里没有定义任何函数或者根本没有任何函数可以返回ElementRef。
我一直认为必须在那里。 Ionic不会像这样让他们的用户感冒。所以我去看了github上的toast Toast。如果单击该链接，您会注意到ViewController类扩展了另一个名为ViewController的类。 pageRef()类有一个名为ElementRef的公共函数。那么这将返回组件的Toast。
由于ViewController类扩展了Toast，pageRef()也可以访问ElementRef。因此，要获得吐司的toast.pageRef()，我所要做的就是写toast.pageRef().nativeElement.getElementsByClassName('toast-message')[0].innerHTML = message;
。
然后为了解决我自己的问题，我所要做的就是写下面的一行：
document不需要JQuery或使用ViewController对象。
Ionic中以编程方式创建并插入树中的每个元素都会分隔到您自己的组件树中，从而扩展pageRef()类。因此，对于警报，弹出窗口和许多其他组件，您也可以使用<div class="col-sm-12">
<div class="col-sm-6 result box" id="divHeatmap">
<!-- This div is replaced by a canvasXpress element-->
<div><canvas id="canvas1"></canvas></div>
</div>
<div class="col-sm-6 result row" style="padding-left:30px;" id="divNetwork">
<div class="col-sm-12 row result box" style="padding-left:30px; ">
<div class="result row">
<div id="cy"></div>
</div>
</div>
</div>
</div>
函数。
答案 1 :(得分：0)
普通的旧Javascript怎么样？我知道这不是最美好的事情，但它是一个解决方案，你不必导入外部库（jquery）。只需declare var document在您的文档顶部，然后：document.getElementsByTagName("ion-toast")[0].innerHTML，如果只有一个，当然。此外，请注意，当toast被解除时，元素将从DOM中删除，您无法再以这种方式访问它。
此外，如果它不在屏幕中，它将无法在DOM中访问。
希望这对你有所帮助。