javascript - 错误:使用Renderer2创建Angular服务时出现StaticInjectorError(AppModule)[SomeComponent-> Renderer2]

我正在尝试创建服务以在我的DOM中插入>，而不是通过组件执行此操作。

当在组件中使用Renderer2时，我的实现效果很好，但是通过服务使用Rendere2时出现以下错误：


  core.js：15724错误错误：未捕获（承诺）：错误：
  StaticInjectorError（AppModule）[ContactUsPageComponent-> Renderer2]：
  StaticInjectorError（平台：核心）[ContactUsPageComponent->
  Renderer2]：
      NullInjectorError：Renderer2没有提供程序！错误：StaticInjectorError（AppModule）[ContactUsPageComponent-> Renderer2]：
  StaticInjectorError（平台：核心）[ContactUsPageComponent->
  Renderer2]：


我尝试在我的AppModule中导入Renderer2，但收到此通知：


  （别名）类Renderer2导入Renderer2将此基类扩展为
  实现自定义渲染。默认情况下，Angular渲染模板
  进入DOM。您可以使用自定义渲染来拦截渲染调用，
  或渲染为DOM以外的其他内容。
  
  使用RendererFactory2创建自定义渲染器。
  
  使用自定义渲染器绕过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);
  }
}

我只是使用<script></script从组件中调用它

任何有关如何正确实施此方法的建议将不胜感激！

最佳答案

这是我的问题的答案：

注意：要在服务中使用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();

希望这对别人有帮助！