Renderer kann nicht verwendet werden im Dienst?

Ist es möglich, Renderer im Service oder einfach nur in der Komponente?

Wenn ich Spritzen renderer in-service, den ich erhalten den Fehler, dass das Renderer-provider ist nicht vorhanden.

Sehen plunker-Konsole:

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

  • Welches element erwarten Sie injiziert elementRef? Für ein Bauteil oder eine Richtlinie, dies ist das aktuelle element. Einen service hat Sie nicht. Ich benutze nicht die TS, aber ich bin mir ziemlich sicher, dass die ElementRef parameter des Konstruktors muss ein konkreter Typ für den Injektor, um zu wissen, was zu passieren (ElementRef statt any)
  • Ja, ich vergaß hinzuzufügen, ElementRef Art, aber es funktioniert nicht mit es, entweder.
  • Hatte nicht erwartet, dass. Ich wollte nur darauf hinweisen, wie gut. Es ist kein element zu injizieren, die für einen service. Welches element erwarten Sie injiziert? Wo möchten Sie zum aktualisieren der DOM?
  • Sie können RootRenderer zu bekommen Renderer ist, überprüfen Sie diese plnkr. Die Idee kommt aus diesem repo. Alle credits an @justindujardin.
  • danke, das ist clever gemacht. es funktioniert einwandfrei. Wenn Sie eine Antwort...
InformationsquelleAutor eesdil | 2016-01-10
  1. 6

    Ja, wie Eric schon sagte, Sie können nur passieren, Sie von der tatsächlichen Komponente auf die Service-und es wird funktionieren.

    JEDOCH, die Verantwortung zu Rendern, ein Objekt von der Komponente, nicht der Service, Dienstleistungen gemeint sind, zu handhaben business-Logik (Daten abzurufen meist, je nach app).

    Die ganze Idee ist, dass Sie können verwenden Sie Ihre gesamten Service-layer, wenn Sie jemals ändern Ihre presentation framework/library oder irgendetwas in der Präsentation bezogene Sachen überhaupt, Wenn Sie Dinge tun, wie, die Sie würde die Kopplung Ihrer Dienstleistungen, um Ihre Präsentation, so dass Sie schwerer zu machen ändert sich das später.

    Wenn Sie wiederverwenden möchten die rendering-Logik zwischen den Komponenten, ich würde erstellen Sie eine übergeordnete, abstrakte Klasse mit der Logik und erweitern es mit einer Komponente, die Kinder-Komponente erhalten würde, injiziert die renderer und pass es an der übergeordneten Klasse mit der super() Methode, die sollten rufen Sie die übergeordneten Konstruktor.

    Zumindest kann man eine @Injizierbaren Objekt wie die vorgeschlagene Lösung, aber nennen es SomethingRenderer statt der Leistung, und trennen Sie Sie vom rest der real-Data-Services.

    • wie man hört, Globale Ereignisse auf Fenster eine Komponente, die Verantwortung? Sie können hinzufügen window.addEventListener aber es scheint, es ist nicht prüfbar
    InformationsquelleAutor Langley
  2. 13

    Möglicherweise duplizieren mit Mit Renderer-im Winkel 4

    Können Sie injizieren Renderer2, aber wir können laufen RendererFactory2 zu bekommen Renderer2 Instanz in @Injectable() service.
    Es gibt zwei verschiedene Möglichkeiten, dies zu lösen Problem.

    Eine Instanz von Renderer2 im Service -

    Es ist der Weg, Winkel verwenden, intern in Webworker zum Beispiel.
    Ich habe das problem mit den folgenden code:

    import { Renderer2, RendererFactory2 } from '@angular/core';

@Injectable()
class Service {
    private renderer: Renderer2;

    constructor(rendererFactory: RendererFactory2) {
        this.renderer = rendererFactory.createRenderer(null, null);
    }
}

    Parameter RendererFactory2.createRenderer Methode sind:

    • hostElement mit Typ - any
    • type mit Typ - RendererType2|null

    Können Sie sehen, dass (null, null) Parameter sind hier:
    https://github.com/angular/angular/blob/e3140ae888ac4037a5f119efaec7b1eaf8726286/packages/core/src/render/api.ts#L129

    Pass Renderer2 von Komponente

    //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;
  }
}
    • Ich mag deine erste Lösung, aber wie es aussieht geht gegen Kantige Regeln. Haben Sie es in Ihren Projekten und gefunden keine Probleme? Ist es in Ordnung?
    • Es ist nicht gegen den Kantigen Weg, und ich benutze es in der Produktion. Der einzige Unterschied zwischen den Lösungen ist, dass zuerst schafft neue renderer, und die zweite nutzt vorhandene Instanz. Beide sind mit einer öffentlichen Bibliothek Methoden. Auch RendererFactory2 ist die Verwendung intern im Winkel-für die gleichen vorgeschlagen werden.
    • eine andere Lösung ist, einfach konvertieren Sie Ihre service in eine directive hinzufügen der Richtlinie, um Ihre Komponente HTML Vorlage, und später auf es zu wie @ViewChild(DirectiveClassName) directiveVariableName: DirectiveClassName; von der Komponente TS Datei
    InformationsquelleAutor Eugene Gavrilov
Schreibe einen Kommentar