Angular学习笔记（四） --- Angular Renderer (渲染器)

最新推荐文章于 2025-06-04 09:17:15 发布

wangdan_2013

最新推荐文章于 2025-06-04 09:17:15 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： Angular6 Renderer2 Renderer

本文链接：https://blog.youkuaiyun.com/wangdan_2013/article/details/80450884

Angular 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Angular中的Renderer2服务，它是用于执行UI渲染操作的内置工具。文章详细解释了Renderer2如何替代旧版Renderer，并提供了创建元素、添加和移除样式等操作的实际示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular Renderer (渲染器)

什么是渲染器

渲染器是 Angular 为我们提供的一种内置服务，用于执行 UI 渲染操作。在浏览器中，渲染是将模型映射到视图的过程。模型的值可以是 JavaScript 中的原始数据类型、对象、数组或其它的数据对象。然而视图可以是页面中的段落、表单、按钮等其他元素，这些页面元素内部使用 DOM (Document Object Model) 来表示。

Angular Renderer

RootRenderer

export abstract class RootRenderer {
  abstract renderComponent(componentType: RenderComponentType): Renderer;
}

Renderer

/**
 * @deprecated Use the `Renderer2` instead.
 */
export abstract class Renderer {
  abstract createElement(parentElement: any, name: string, 
    debugInfo?: RenderDebugInfo): any;
  abstract createText(parentElement: any, value: string, 
    debugInfo?: RenderDebugInfo): any;
  abstract listen(renderElement: any, name: string, callback: Function): Function;
  abstract listenGlobal(target: string, name: string, callback: Function): Function;
  abstract setElementProperty(renderElement: any, propertyName: string, propertyValue: 
    any): void;
  abstract setElementAttribute(renderElement: any, attributeName: string, 
    attributeValue: string): void;
  // ...
}

Renderer2

export abstract class Renderer2 {
  abstract createElement(name: string, namespace?: string|null): any;
  abstract createComment(value: string): any;
  abstract createText(value: string): any;
  abstract setAttribute(el: any, name: string, value: string,
    namespace?: string|null): void;
  abstract removeAttribute(el: any, name: string, namespace?: string|null): void;
  abstract addClass(el: any, name: string): void;
  abstract removeClass(el: any, name: string): void;
  abstract setStyle(el: any, style: string, value: any, 
    flags?: RendererStyleFlags2): void;
  abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void;
  abstract setProperty(el: any, name: string, value: any): void;
  abstract setValue(node: any, value: string): void;
  abstract listen(
      target: 'window'|'document'|'body'|any, eventName: string,
      callback: (event: any) => boolean | void): () => void;
}

需要注意的是在 Angular 6 版本，我们使用 Renderer2 替代 Renderer。通过观察 Renderer 相关的抽象类 (Renderer、Renderer2)，我们发现抽象类中定义了很多抽象方法，用来创建元素、文本、设置属性、添加样式和设置事件监听等。

使用 `Renderer`

@Component({
  selector: 'exe-renderer',
  template: `
    <h3>Renderer Component</h3>
  `
})
export class ExeComponent {
  constructor(private renderer: Renderer2, el: ElementRef) {
    this.renderer.setProperty(el.nativeElement, 'author', 'danwang');
  }
}

以上代码中，我们利用构造注入的方式，注入 Renderer2 和 ElementRef 实例。

实例

在开发中，我们都比较喜欢用jQuery，因为jQuery操作dom很方便，现在用Renderer2来创建方法也可以很方便的操作DOM

一个给angular中组件移除class的方法

private removeClass(el: HTMLElement, classMap: object, renderer: Renderer2): void {
    for (const i in classMap) {
      if (classMap.hasOwnProperty(i)) {
        renderer.removeClass(el, i);
      }
    }
  }

添加class方法

private addClass(el: HTMLElement, classMap: object, renderer: Renderer2): void {
    for (const i in classMap) {
      if (classMap.hasOwnProperty(i)) {
        if (classMap[ i ]) {
          renderer.addClass(el, i);
        }
      }
    }
  }