錯誤：使用 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();

希望這對其他人有幫助！