错误: StaticInjectorError(AppModule)[SomeComponent -> Renderer2]在使用Renderer2创建角服务时

Question

我正在尝试创建一个服务，在我的DOM中注入一个<script></script>，而不是通过我的组件这样做。

当在组件中使用Renderer2时，我的Rendere2实现工作得很好，但是当通过服务使用Rendere2时，我得到了以下错误：

StaticInjectorError(AppModule)ContactUsPageComponent core.js:15724错误: Uncaught (承诺)：

：-> Renderer2：

StaticInjectorError(平台:核心)ContactUsPageComponent -> Renderer2: NullInjectorError:没有Renderer2的提供者！错误: StaticInjectorError(AppModule)ContactUsPageComponent -> Renderer2：

StaticInjectorError(平台:核心)ContactUsPageComponent -> Renderer2：

我尝试在我的AppModule中导入Renderer2，但是得到了以下通知：

(别名)类Renderer2导入Renderer2扩展此基类以实现自定义呈现。默认情况下，角将模板呈现到DOM中。您可以使用自定义呈现来拦截呈现调用，或者呈现到DOM以外的其他内容。

使用RendererFactory2创建自定义呈现器。

使用自定义呈现程序绕过角的模板，并进行不能以声明方式表示的自定义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.chatbotService.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();

希望这能帮到别人！