我正在尝试创建一个服务来注入(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();
如有任何有关如何正确实现的建议,我们将不胜感激!
最佳答案
这是我的问题的答案:
注意:要在服务中使用 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();
希望这对其他人有帮助!
关于javascript - 错误 : StaticInjectorError(AppModule)[SomeComponent -> Renderer2] when creating an Angular service with Renderer2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58989990/