在 Angular 中，我们经常需要访问 DOM 元素来进行一些操作，例如添加样式、修改元素属性等。而 Renderer2 正是 Angular 提供的一个访问 DOM 的工具，它可以帮助我们避免直接操作 DOM，从而提高应用的性能和可维护性。
Renderer2 的作用
Renderer2 是 Angular 提供的一个抽象层，它封装了对 DOM 的访问，使得我们可以在不直接操作 DOM 的情况下进行 DOM 操作。Renderer2 的主要作用包括：
- 提供安全的 DOM 操作，避免 XSS 攻击；
- 支持跨平台操作，例如在服务器端渲染时也可以使用 Renderer2；
- 提供更好的可维护性，使得我们可以更方便地修改 DOM 操作的实现方式。
如何使用 Renderer2
在使用 Renderer2 之前，我们需要先在组件中注入它，例如：
-- -------------------- ---- ------- ------ - ---------- --------- - ---- ---------------- ------------ --------- ----------- --------- ----- -------------- -- ------ ----- ------------ - ------------------- --------- ---------- -- -
在注入 Renderer2 后，我们就可以使用它提供的方法来进行 DOM 操作了。下面是一些常用的 Renderer2 方法：
createElement
createElement(name: string, namespace?: string): any
该方法用于创建一个元素节点，并返回该节点的引用。例如：
const div = this.renderer.createElement('div');createText
createText(text: string): any
该方法用于创建一个文本节点，并返回该节点的引用。例如：
const text = this.renderer.createText('Hello World');appendChild
appendChild(parent: any, newChild: any): void
该方法用于将一个子节点添加到指定的父节点中。例如：
const div = this.renderer.createElement('div');
const text = this.renderer.createText('Hello World');
this.renderer.appendChild(div, text);removeChild
removeChild(parent: any, oldChild: any): void
该方法用于从指定的父节点中移除一个子节点。例如：
const div = this.renderer.createElement('div');
const text = this.renderer.createText('Hello World');
this.renderer.appendChild(div, text);
this.renderer.removeChild(div, text);setAttribute
setAttribute(el: any, name: string, value: string, namespace?: string): void
该方法用于设置元素节点的属性。例如：
const div = this.renderer.createElement('div');
this.renderer.setAttribute(div, 'class', 'my-class');removeAttribute
removeAttribute(el: any, name: string, namespace?: string): void
该方法用于移除元素节点的属性。例如：
const div = this.renderer.createElement('div');
this.renderer.setAttribute(div, 'class', 'my-class');
this.renderer.removeAttribute(div, 'class');addClass
addClass(el: any, name: string): void
该方法用于给元素节点添加一个 CSS 类。例如：
const div = this.renderer.createElement('div');
this.renderer.addClass(div, 'my-class');removeClass
removeClass(el: any, name: string): void
该方法用于从元素节点中移除一个 CSS 类。例如：
const div = this.renderer.createElement('div');
this.renderer.addClass(div, 'my-class');
this.renderer.removeClass(div, 'my-class');setStyle
setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void
该方法用于设置元素节点的样式。例如：
const div = this.renderer.createElement('div');
this.renderer.setStyle(div, 'background-color', 'red');removeStyle
removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void
该方法用于移除元素节点的样式。例如：
const div = this.renderer.createElement('div');
this.renderer.setStyle(div, 'background-color', 'red');
this.renderer.removeStyle(div, 'background-color');总结
在 Angular 中，我们可以使用 Renderer2 来访问 DOM，从而避免直接操作 DOM 带来的性能和安全问题。Renderer2 提供了一系列方法，可以帮助我们进行 DOM 操作，例如创建节点、添加子节点、设置样式等。通过学习 Renderer2 的使用，我们可以更好地编写可维护和安全的 Angular 应用。
示例代码
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------------
--------- -----------
--------- ----- --------------
--
------ ----- ------------ -
------------------- --------- ---------- --
----------------- -
----- --- - -----------------------------------
----- ---- - ------------------------------- --------
------------------------------ ------
------------------------------- -------- ------------
--------------------------- ------------------- -------
----- ----- - ---------------------------------
-------------------------------- -----
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663c7b0ad3423812e4a5ed0b