在Angular 4中使用Renderer

Question

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

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

__zone_symbol__message：“没有Renderer2的提供者！”

__zone_symbol__stack：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来获取@Injectable()服务中的Renderer2实例。 例如，Angular在网络工作者内部使用的方式。

我用下面的代码解决了这个问题：

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类型RendererType2|null

你可以看到(null, null)参数在这里： https ： //github.com/angular/angular/blob/e3140ae888ac4037a5f119efaec7b1eaf8726286/packages/core/src/render/api.ts#L129