错误：使用Render2创建角度服务时，StaticInjectorError（AppModule）[SomeComponent->Render2]

Question

我正在尝试创建一个服务来注入

在组件中使用Render2时，我的Render2实现可以完美工作，但通过服务使用Render2时，我会遇到以下错误：

果心js:15724错误：未捕获（promise中）：错误：StaticInjectorError（AppModule）[ContactUsPageComponent-

我已尝试在AppModule中导入RenderR2，但收到以下通知：

（别名）类RenderR2导入RenderR2扩展此基类以实现自定义渲染。默认情况下，Angular将模板渲染到DOM中。您可以使用自定义渲染来拦截渲染调用，或渲染到DOM以外的其他对象。

使用RenderFactory2创建自定义渲染器。

使用自定义渲染器绕过Angular的模板，并进行无法声明性表达的自定义UI更改。例如，如果需要设置名称不是静态已知的属性或属性，请使用setProperty（）或setAttribute（）方法。

这是我的服务实现：

import { Injectable, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class ChatbotService {

  constructor(private renderer2: Renderer2, @Inject(DOCUMENT) private document) {}

  showChatbot() {
    const s = this.renderer2.createElement('script');
    s.type = 'text/javascript';
    s.id = 'ze-snippet';
    s.src = 'https://static.zdassets.com/ekr/snippet.js?key=7e...';
    s.text = ``;
    this.renderer2.appendChild(this.document.body, s);
  }
}

我只是使用：this从组件调用它。聊天服务。showChatbot（）

任何关于如何正确实施的建议都将不胜感激！




Answer 1

这是我问题的答案：

注意：要在服务中使用Renderer2，您需要使用RendererFactory2创建Renderer2的实例。从那里它是直接向前的。

这是我的服务代码：

import { Injectable, Renderer2, RendererFactory2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class ChatbotService {
  private renderer: Renderer2;

  constructor(private rendererFactory: RendererFactory2, @Inject(DOCUMENT) private document) {
    this.renderer = rendererFactory.createRenderer(null, null);
  }

  showChatbot() {
    const s = this.renderer.createElement('script');
    s.type = 'text/javascript';
    s.id = 'ze-snippet';
    s.src = 'https://static.zdassets.com/ekr/snippet.js?key=7e...';
    s.text = ``;
    this.renderer.appendChild(this.document.body, s);
  }
}

这是我的组件调用：this.chatbotService.showChatbot（）；

希望这能帮助别人！