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

Question

我正在尝试创建一个服务以在我的 DOM 中注入一个<script></script >，而不是通过我的组件来执行此操作。

在组件中使用 Renderer2 时，我的实现完美运行，但是通过服务使用 Rendere2 时出现此错误：

core.js:15724 错误错误：未捕获（承诺中）：错误：StaticInjectorError（AppModule）[ContactUsPageComponent -> Renderer2]：
StaticInjectorError(Platform: core)[ContactUsPageComponent -> Renderer2]: NullInjectorError: No provider for Renderer2: Error: StaticInjectorError(AppModule)[ContactUsPageComponent -> Renderer2]:
StaticInjectorError（平台：核心）[ContactUsPageComponent -> Renderer2]：

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

（别名） class Renderer2 import Renderer2 扩展此基础 class 以实现自定义渲染。 默认情况下，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);
  }
}

我只是从一个组件中调用它： 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();

希望这对其他人有帮助！