Angular 获取DOM元素的正确方法

我有一个独特的处境。我正在使用Angular 2和Ionic 2制作一个手机应用程序。我需要获得爱奥尼亚2的一个组件的DOM元素，以便在其

innerHTML

属性中插入一些html

在Angular 2中我该怎么做？我根本无法访问这个组件，因为它是Ionic附带的组件之一。更具体地说，它是

toast

组件，我在一个Typescript函数中对其进行了初始化，但我无法获取创建的DOM元素

我可以包含JQuery并轻松获得组件所需的DOM元素，但我了解到在Angular 2应用程序中包含JQuery是一种糟糕的做法

我使用

ViewChild

进行了查找，但这只适用于您制作的组件。由于这是Ionic 2附带的组件，并且我没有创建该组件，因此我无法使用

ViewChild

获取其

ElementRef

EDIT:我忘了说，当爱奥尼亚2插入

toast

元素时，它是作为身体的子元素插入的。所以它不在我的组件创建的组件树中，我不能使用类似

ContentChild

的东西来搜索子体，因为它不是子体

---

那么，如何仅使用Angular 2获取该组件的DOM元素呢？

普通的旧Javascript如何？我知道它不是最漂亮的东西，但它是一个解决方案，您不必导入外部库（jquery）。只需在文档顶部声明var document，然后：

document.getElementsByTagName（“ion toast”）[0]。当然，如果只有一个，innerHTML

。另外，请注意，当toast被解除时，元素将从DOM中删除，并且您不能再以这种方式访问它。 而且，如果它不在屏幕上，它将无法在DOM中访问

---

希望这对您有所帮助。

普通老Javascript怎么样？我知道它不是最漂亮的东西，但它是一个解决方案，您不必导入外部库（jquery）。只需在文档顶部声明var document，然后：

document.getElementsByTagName（“ion toast”）[0]。当然，如果只有一个，innerHTML

。另外，请注意，当toast被解除时，元素将从DOM中删除，并且您不能再以这种方式访问它。 而且，如果它不在屏幕上，它将无法在DOM中访问

---

希望这对你有帮助。

所以我解决了自己的问题。昨晚我开始思考，在Angular 2中，您不应该使用JQuery或

文档

对象，因为您创建的每个组件都可以访问自己的DOM元素及其所有子元素

问题是，当在Typescript中以编程方式创建toast时，它不是插入到您自己的组件中，而是插入到由Ionic创建的组件树的另一个分支中。问题就在这里，你无法访问这个单独的分支（或者我是这么认为的）

然后我想，如果我在设计一个框架，我的用户偶尔需要访问这个树，或者至少需要访问他们在其中创建的单个元素。因此，我进入了Ionic 2 API并查看了

toast

。这里没有定义任何函数或任何具有返回

ElementRef

的内容

我一直在想它一定在那里。爱奥尼亚不会像这样冷落用户。所以我去看了github上的for

toast

。如果单击该链接，您会注意到

Toast

类扩展了另一个名为

ViewController

的类。而

ViewController

类有一个名为

pageRef（）

的公共函数。这将返回组件的

ElementRef

由于

Toast

类扩展了

ViewController

，

Toast

也可以访问

pageRef（）

。因此，要获得toast的

ElementRef

，我所要做的就是编写

toast.pageRef（）

然后，为了解决我自己的问题，我所要做的就是写下一行：

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

不需要JQuery或使用

文档

对象

---

Ionic中以编程方式创建并插入到树中的每个元素（与您自己的组件树分离）都扩展了

ViewController

类。因此，对于警报、弹出窗口和许多其他组件，您也可以使用

pageRef（）

函数。

因此我解决了自己的问题。昨晚我开始思考，在Angular 2中，您不应该使用JQuery或

文档

对象，因为您创建的每个组件都可以访问自己的DOM元素及其所有子元素

问题是，当在Typescript中以编程方式创建toast时，它不是插入到您自己的组件中，而是插入到由Ionic创建的组件树的另一个分支中。问题就在这里，你无法访问这个单独的分支（或者我是这么认为的）

然后我想，如果我在设计一个框架，我的用户偶尔需要访问这个树，或者至少需要访问他们在其中创建的单个元素。因此，我进入了Ionic 2 API并查看了

toast

。这里没有定义任何函数或任何具有返回

ElementRef

的内容

我一直在想它一定在那里。爱奥尼亚不会像这样冷落用户。所以我去看了github上的for

toast

。如果单击该链接，您会注意到

Toast

类扩展了另一个名为

ViewController

的类。而

ViewController

类有一个名为

pageRef（）

的公共函数。这将返回组件的

ElementRef

由于

Toast

类扩展了

ViewController

，

Toas