在 Angular 中，我们经常需要操作 DOM 节点，例如添加、删除、修改节点的属性等。而为了避免直接操作 DOM 节点导致的安全风险，官方推荐使用 Renderer2 进行 DOM 操作。
但是，在使用 Renderer2 操作 DOM 节点时，我们可能会遇到一些常见的问题，例如当我们使用 Renderer2 创建一个新的节点时，该节点不会像直接使用 createElement() 方法时自动在 DOM 中插入。本文将介绍解决这些问题的方法。
问题描述
问题1：创建的新节点不会自动插入到 DOM 中。
-- -------------------- ---- -------
------ - ---------- ----------- --------- - ---- ----------------
------------
--------- -----------
--------- -
---- -----------------
--
--
------ ----- ------------ -
------------------- ----------- ----------- ------- --------- ---------- --
----------------- -
----- --- - -----------------------------------
----- ---- - ------------------------------ -- - --- ------
------------------------------ ------
-------------------------------------------------------- -----
-
-在上述代码中，我们创建了一个 div 元素和一个文本节点，然后通过 appendChild 方法将文本节点添加到 div 中，再将 div 添加到组件的 elementRef 上。
但是，当我们运行这段代码时，页面上并没有新创建的 div 元素。这是因为 Renderer2 中的元素不会自动添加到 DOM 中，需要手动调用 appendChild 方法将其添加到 DOM 中。
问题2：动态添加样式时，有时样式不生效。
-- -------------------- ---- -------
------ - ---------- ----------- --------- - ---- ----------------
------------
--------- -----------
--------- -
---- -----------------
--
--
------ ----- ------------ -
------------------- ----------- ----------- ------- --------- ---------- --
----------------- -
----- ----- - -------------------------------------
----- ---- - ------------------------------------ - ------ ---- ----
-------------------------------- ------
-------------------------------------------------------- -------
----- --- - -----------------------------------
-------------------------------
----- -------- - ------------------------------ -- - --- --- ---- --------
------------------------------ ----------
-------------------------------------------------------- -----
-
-在上述代码中，我们创建了一个 style 元素，并将 CSS 规则插入到其中，然后将 style 添加到组件的 elementRef 上。接着我们创建一个 div 元素，并为其添加 .new-class 样式类，然后添加到组件的 elementRef 上。
但是，当我们运行这段代码时，发现该 div 元素没有应用 .new-class 样式类，其颜色仍然为默认值。
解决方案
问题1：创建的新节点不会自动插入到 DOM 中。
要解决这个问题，我们需要手动调用 appendChild 方法将创建的新节点添加到 DOM 中。可以直接将新节点添加到组件的 elementRef 上，也可以将其添加到要插入的父节点上。
-- -------------------- ---- -------
------ - ---------- ----------- --------- - ---- ----------------
------------
--------- -----------
--------- -
---- -----------------
--
--
------ ----- ------------ -
------------------- ----------- ----------- ------- --------- ---------- --
----------------- -
----- --- - -----------------------------------
----- ---- - ------------------------------ -- - --- ------
------------------------------ ------
-- ---------- ---------- -
-------------------------------------------------------- -----
-- -----------------
-- ----------------------------------------------------------------- -----
-
-问题2：动态添加样式时，有时样式不生效。
要解决这个问题，我们需要在新创建的元素插入到 DOM 后，等待一段时间再应用样式，或者使用 setTimeout 函数。
-- -------------------- ---- -------
------ - ---------- ----------- --------- - ---- ----------------
------------
--------- -----------
--------- -
---- -----------------
--
--
------ ----- ------------ -
------------------- ----------- ----------- ------- --------- ---------- --
----------------- -
----- ----- - -------------------------------------
----- ---- - ------------------------------------ - ------ ---- ----
-------------------------------- ------
-------------------------------------------------------- -------
----- --- - -----------------------------------
----- -------- - ------------------------------ -- - --- --- ---- --------
------------------------------ ----------
-------------------------------------------------------- -----
-- -----------
------------- -- -
-------------------------------
-- ---
-
-总结
在使用 Angular 中的 Renderer2 进行 DOM 操作时，要注意一些常见的问题，例如新创建的元素不会自动插入到 DOM 中、动态添加样式时样式不生效等。要解决这些问题，我们需要手动调用 appendChild 方法将元素添加到 DOM 中，或者等待一段时间再应用样式，或者使用 setTimeout 函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e422d8f6b2d6eab3f7eb82