渲染器不能用于服务？

Question

是否可以在服务中使用Renderer或仅在组件中使用？

如果我将渲染器注入服务器,则会出现错误,即Renderer提供程序丢失.

请参阅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

可能与Angular 4中的使用渲染器重复

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

在Service中获取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方法参数是:

• 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）所说的那样，您可以将其从实际组件传递到服务，然后它将起作用。

但是，呈现对象的责任是组件而非服务的责任，服务是用来处理业务逻辑的（主要是检索数据，具体取决于您的应用程序）。

整个想法是，如果您更改了演示文稿框架/库或任何与演示文稿有关的内容，则可以重用整个服务层。如果您执行类似的操作，则会将服务耦合到演示文稿，从而使制作工作变得更加困难稍后更改。

如果要在组件之间重用渲染逻辑，我将使用该逻辑创建一个父抽象类，并使用Component对其进行扩展，子组件将被注入渲染器，并使用super()应调用的方法将其传递给父类。父级的构造函数。

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