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

我试图创建一个服务来在DOM中注入

，而不是通过我的组件

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

core.js:15724错误：未捕获（承诺中）：错误：
StaticInjectorError（AppModule）[ContactUsPageComponent->Renderer2]：

StaticInjectorError（平台：核心）[联系人页面组件->
渲染器2]：
NullInjectorError:渲染器2没有提供程序！错误：StaticInjectorError（AppModule）[ContactUsPageComponent->Renderer2]：

StaticInjectorError（平台：核心）[联系人页面组件->
渲染器2]：

我已尝试在AppModule中导入渲染器2，但收到以下通知：

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);
  }
}

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);
  }
}

（别名）类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);
  }
}

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（）

任何关于如何正确实施的建议都将不胜感激
 以下是我问题的答案：

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);
  }
}

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);
  }
}

注意：要在服务中使用RenderR2，需要使用RenderFactory2创建RenderR2的实例。从那里开始，它是直接向前的

这是我的服务代码：

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);
  }
}

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（）

希望这对其他人有帮助