Angular Renderer2 的作用和使用场景介绍

下图将 css class cx-icon 添加到 host dom 上。

最后效果如下：

使用的 renderer 来自：

import {
  Component,
  ElementRef,
  HostBinding,
  Input,
  Renderer2,
} from '@angular/core';

Angular的Renderer2是Angular框架中用于操作DOM元素的重要工具之一。Renderer2的主要作用是提供一个抽象层，使得应用程序可以与底层的DOM结构进行交互，而不必直接依赖于浏览器的DOM API。这种抽象层的存在使得Angular应用更加灵活，更容易进行单元测试，并且使得应用更容易迁移到不同的平台，如Web Worker或NativeScript。

Renderer2的使用场景通常涉及到需要在Angular应用中进行DOM操纵的情况，例如动态创建、更新和删除元素、修改元素的样式和属性等。通过使用Renderer2，我们可以确保这些DOM操作是安全的，并且不会绕过Angular的变更检测机制。

以下是一些Renderer2的主要方法及其用途的示例：

1. createElement：创建元素

   使用Renderer2的createElement方法，我们可以安全地创建DOM元素，并将其添加到特定的父元素中。这有助于确保元素的创建不会导致Angular的变更检测机制失效。

   const divElement = renderer.createElement('div');
   renderer.appendChild(parentElement, divElement);
   

2. setProperty：设置元素属性

   通过setProperty方法，我们可以设置DOM元素的属性。这在需要动态更改元素属性时非常有用。

   renderer.setProperty(element, 'value', 'New Value');
   

3. setStyle：设置元素样式

   setStyle方法用于设置DOM元素的样式。这是在运行时动态更改元素样式的一种安全方式。

   renderer.setStyle(element, 'color', 'blue');
   

4. addClass 和 removeClass：添加和移除 CSS 类

   addClass和removeClass方法分别用于添加和移除元素的CSS类。

   renderer.addClass(element, 'highlight');
   renderer.removeClass(element, 'inactive');
   

5. appendChild 和 removeChild：添加和移除子元素

   使用appendChild和removeChild，我们可以安全地添加和移除DOM元素的子元素。

   const childElement = renderer.createElement('span');
   renderer.appendChild(parentElement, childElement);
   
   // ...
   
   renderer.removeChild(parentElement, childElement);
   

6. listen：监听事件

   使用listen方法，我们可以为DOM元素添加事件监听器，而不必直接使用addEventListener。

   const subscription = renderer.listen(element, 'click', () => {
     console.log('Element clicked');
   });
   
   // ...
   
   // 在需要时取消监听
   subscription();
   

通过使用Renderer2，我们可以确保所有的DOM操作都符合Angular的生命周期和变更检测机制，从而提高应用的稳定性和性能。这也使得应用更容易进行维护和测试，因为所有与DOM相关的操作都可以集中在Renderer2的方法中进行管理。