Renderer can not be used in the service?

Question

Can I use Renderer in a service or just in a component?

If I embed a visualizer in a service, I get an error that the Renderer provider is missing.

See the plunker console:

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

Yes, as Eric said, you can simply transfer it from the actual component to the Service, and it will work.

HOWEVER, the responsibility for rendering an object lies in the fact that the component, not the services, are designed to process business logic (mainly, depending on your application).

, , - / -, , , , , .

, Component, super(), .

, @Injectable, , SomethingRenderer .

Answer 2

Renderer Angular 4

Renderer2, RendererFactory2, Renderer2 @Injectable(). issue.

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