javascript - 错误 : StaticInjectorError(AppModule)[SomeComponent -> Renderer2] when creating an Angular service with Renderer2

Question

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

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

core.js:15724 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[ContactUsPageComponent -> Renderer2]:
StaticInjectorError(Platform: core)[ContactUsPageComponent -> Renderer2]: NullInjectorError: No provider for Renderer2! Error: StaticInjectorError(AppModule)[ContactUsPageComponent -> Renderer2]:
StaticInjectorError(Platform: core)[ContactUsPageComponent -> Renderer2]:

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

(alias) class Renderer2 import Renderer2 Extend this base class to implement custom rendering. By default, Angular renders a template into DOM. You can use custom rendering to intercept rendering calls, or to render to something other than DOM.

Create your custom renderer using RendererFactory2.

Use a custom renderer to bypass Angular's templating and make custom UI changes that can't be expressed declaratively. For example if you need to set a property or an attribute whose name is not statically known, use the setProperty() or setAttribute() method.

这是我的服务实现:

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

希望这对其他人有帮助!