渲染器不能在服务中使用？

Question

是否可以在服务中或仅在组件中使用渲染器？

如果我将渲染器注入到服务中，我会收到错误，即缺少渲染器提供程序。

查看 plunker 的控制台：

import {Injectable, Component, Renderer, ElementRef} from 'angular2/core';

@Injectable()
class TestService {
  constructor(
    private _renderer: Renderer
    ) {}

  renderElement(elementRef: any) {
    this._renderer.createElement(elementRef.nativeElement, 'div');
  }
}

http://plnkr.co/edit/e8qlznCVbvZnXbLTk36z?p=preview

Answer 1

可能与Using Renderer in Angular 4 重复

您不能注入Renderer2，但我们可以运行RendererFactory2 以在@Injectable() 服务中获取Renderer2 实例。 有两种不同的方法可以解决这个问题issue。

在 Service 中获取 Renderer2 的实例

例如，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方法的参数为：

• hostElement 类型为 any
• type 类型为 RendererType2|null

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

从组件传递 Renderer2

// 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;
  }
}

Answer 2

是的，就像 Eric 说的那样，您可以将它从实际组件传递到服务，它就会起作用。

但是，渲染对象的责任在于组件，而不是服务，服务旨在处理业务逻辑（主要检索数据，具体取决于您的应用）。

整个想法是，如果您改变您的演示框架/库或任何与演示相关的东西，您可以重用整个服务层，如果您这样做，您会将您的服务耦合到您的演示，使以后更难进行更改。

如果你想在组件之间重用渲染逻辑，我会创建一个带有逻辑的父抽象类并使用组件扩展它，子组件将被注入渲染器并使用 @ 将其传递给父类987654321@ 应该调用父级构造函数的方法。

至少您可以像建议的解决方案一样创建一个@Injectable 对象，但将其称为SomethingRenderer 而不是Service，并将其与您的其他真实数据服务分开。