Question

我试图将Renderer2注入我的自定义服务，但是它失败并出现如下错误：

ERROR Error: StaticInjectorError[Renderer2]: 
  StaticInjectorError[Renderer2]: 
    NullInjectorError: No provider for Renderer2!

这是一个使用cli创建的全新角度应用，我创建的自定义服务是：

import { Injectable, Renderer2 } from '@angular/core';

@Injectable()
export class FontsService {

  constructor(private renderer: Renderer2) { 
    console.log(this.renderer);
  }

  getFonts() {
    return 'Ubuntu';
  }

}

app.module非常简单地只提供新创建的服务：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FontsService } from './fonts.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [FontsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

请帮忙吗？

谢谢。

Answer 1

例如，Angular在网络工作者中有内部使用的方式。

我已用以下代码解决了问题：

RendererFactory2.createRenderer

hostElement方法的参数是：

any

type 类型为RendererType2|null
(null, null)

您可以在此处看到{{1}}个参数： https://github.com/angular/angular/blob/e3140ae888ac4037a5f119efaec7b1eaf8726286/packages/core/src/render/api.ts#L129

Answer 2

在组件初始化期间注入Renderer2，并将组件引用传递给服务以访问服务内部的renderer。

在组件内部：

constructor(private renderer: Renderer2, private myService: MyService) {} this.myService.doSomething(this);

在myservice.service.ts内部：

doSomething(componentReference) { //access renderer at componentReference.renderer }

如何在Angular 4中将Renderer2注入自定义服务

2 个答案: