如何將 Renderer2 注入 Angular 4 中的自定義服務

Question

我正在嘗試將 Renderer2 注入我的自定義服務，但失敗並顯示如下錯誤：

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

這是一個使用 cli 創建的全新 angular 應用程序，我創建的自定義服務是：

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 在 webworkers 內部使用的方式。

我已經用下面的代碼解決了這個問題：

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

@Injectable()
class Service {
    private renderer: Renderer2;

    constructor(rendererFactory: RendererFactory2) {
        this.renderer = rendererFactory.createRenderer(null, null);
    }
}

RendererFactory2.createRenderer方法的參數是：

• 類型為any hostElement
• type為RendererType2|null

你可以看到(null, null)參數在這里： 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 }