Question

我理解为什么使用渲染器而不是直接操纵Angular2项目中的DOM会更好。但是，我已经多次卸载，清除缓存，重新安装Node，Typescript和Angular-CLI，并且在尝试注入渲染器时仍然出现错误。

import { Injectable, Renderer2 } from '@angular/core';
constructor(private renderer: Renderer2) {}

__ zone_symbol__message：＆＃34;没有Renderer2的提供者！＆＃34;

__ zone_symbol__stack：＆＃34;错误↵在Error.ZoneAwareError

有没有人有任何想法我做错了什么？

Answer 1

<强>更新

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

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

在此处查看更多内容： https://github.com/angular/angular/issues/17824#issuecomment-351961146

以前的版本：

根据你的进口

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

我怀疑你是在尝试在服务类中注入Renderer2。它不会起作用。您无法在服务中注入Renderer2。它应该适用于组件内提供的组件和服务。

我们可以查看源代码https://github.com/angular/angular/blob/4.0.1/packages/core/src/view/provider.ts#L363-L373

while (view) {
  if (elDef) {
    switch (tokenKey) {
      case RendererV1TokenKey: {
        const compView = findCompView(view, elDef, allowPrivateServices);
        return createRendererV1(compView);
      }
      case Renderer2TokenKey: {
        const compView = findCompView(view, elDef, allowPrivateServices);
        return compView.renderer;
      }

它仅在元素注入器树中进行检查。如果可以提供此令牌，则没有其他地方

因此，当您调用某种服务方法时，必须将Renderer2从组件传递到服务https://github.com/angular/angular/issues/17824#issuecomment-311986129

或者您可以在组件

中提供服务

@Injectable()
export class Service {
  constructor(private r: Renderer2) {}
}
@Component({
  selector: 'my-app',
  templateUrl: `./app.component.html`,
  providers: [Service]
})
export class AppComponent { 
  constructor(private service: Service) {}
}

Answer 2

您无法注入Renderer2，但我们可以运行RendererFactory2来获取Renderer2服务中的@Injectable()实例。例如，Angular在网络工作者中有内部使用的方式。

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

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

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

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

RendererFactory2.createRenderer方法的参数是：

hostElement

any 类型为type
RendererType2|null

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

在Angular 4中使用Renderer

2 个答案: