Typescript 服务：没有 Renderer2 的提供者

发布于12月21日

Angular 4.2对Typescript 2.3

我正在重构一个服务，该服务负责创建一个新的脚本标记并将其添加到文档中.

以下是旧代码:

loadScript(src:string){
    const script = document.createElement('script');
    document.body.appendChild(script);
    script.src = src;
}

现在，我想使用Renderer2来避免直接进行DOM操作.所以我在我的服务中注入了我需要的东西，并更新了代码:

constructor(private renderer:Renderer2, @Inject(DOCUMENT) private document){}

loadScript(src:string){
    const script = this.renderer.createElement('script');
    this.renderer.appendChild(this.document.body,script);
    script.src = src;
}

然而，我遇到了这个错误:

错误:渲染器2没有提供程序！

该服务属于一个CoreModule，其唯一导入是@angular/common中的CommonModule

This plunkr说明了这个问题

获取Renderr2内部服务的实例

例如，在webworkers中有一种内部使用Angular的方式.

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

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

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

在你的特殊情况下，它将是

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

  constructor(rendererFactory: RendererFactory2, @Inject(DOCUMENT) private document){
    this.renderer = rendererFactory.createRenderer(null, null);
  }

  loadScript(src:string){
    const script = this.renderer.createElement('script');
    this.renderer.appendChild(this.document.body,script);
    script.src = src;
  }
}

RendererFactory2.createRenderer方法的参数为:

hostElement和any型
type和RendererType2|null型

您可以看到这里有(null, null)个参数:

从组件传递渲染器2

// declare public property in your service
@Injectable()
class Service {
  renderer: Renderer;
}

// pass renderer to service in your component file
class App {
  name:string;
  constructor(service: Service, renderer: Renderer2) {
      service.renderer = renderer;
  }
}