在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来获取服务中的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