エラー：Renderer2のプロバイダがありません！ Angular v 4.1.3

Question

現在、私はアップグレードで壊れたサービスをリファクタリングしています。私はbrowserdomadapter（）を置き換えなければならなかった。その他いくつかの廃止予定のメソッドがあります。

2.1ishのさまざまな廃止予定やさまざまな変更点のため、この特定のサービスをコンポーネントに配信する方法を変更する必要がありました。私は今、コンポーネントに直接注入しています。さまざまな回答（角型開発者による）で見たコンポーネントは、推奨されています。ここ

は誤りです：

あなたは、関連するコードに下記を参照できるような問題は、私はすでにプロバイダ上のコンポーネントに注入されたサービスを参照しています：

import {Location} from "@angular/common"; 
import {Component, Injectable, Renderer2, Inject} from "@angular/core"; 
import {SerieService} from "../shared/services/serie.service"; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { CategoryService } from "../shared/services/category.service"; 
import {Router, ActivatedRoute, RouterModule, NavigationEnd} from "@angular/router"; 

import {Http, HttpModule} from "@angular/http"; 
import {PageviewService} from "../shared/services/pageview.service"; 
import {Title, DOCUMENT} from '@angular/platform-browser'; 
import {SeoService} from '../shared/services/seo.service'; 

@Injectable() 
export class Service { 


private metaDescription: HTMLElement; 

private headElement: HTMLElement; 

private robots: HTMLElement; 



constructor(@Inject(DOCUMENT) private document: any, private r: Renderer2, private titleService: Title){ 
this.headElement = this.document.head; 
this.metaDescription = this.getOrCreateMetaElement('description'); 

} 

public setMetaDescription(description: string) { 
    this.r.setAttribute(this.metaDescription, 'content', description) 
} 

public setMetaRobots(robots: string) { 
    this.r.setAttribute(this.robots, 'content', robots); 
} 

public setTitle(newTitle: string) { 
    this.titleService.setTitle(newTitle + ' | Stareable'); 
} 

private getOrCreateMetaElement(name: string): HTMLElement { 
    let el: HTMLElement; 
    el = this.document.querySelector('meta[name=' + name + ']'); 
    if (el === null) { 
     el = this.document.setAttribute('meta'); 
     this.headElement.appendChild(el); 
    } 
    return el; 
    } 

} 




@Component({ 
    inputs: ['category'], 
    templateUrl: './categories.component.html', 
    styleUrls: ['./categories.component.scss'], 
    providers: [ Service ] 
}) 

export class CategoriesComponent { 

    public category: string; 
    public seriesList: any; 
    public message: string; 
    public loading: boolean; 
    public errorMessage: string; 

    private slug:string; 

constructor (
    private service: Service, 
    private _router: Router, 
    private _activatedRoute: ActivatedRoute, 
    private _categoryService: CategoryService, 
    private _seriesService: SerieService, 
    private _pageviewService: PageviewService, 
    private location: Location, 
    private _httpService: Http, 
    private seoService: SeoService 
) { 
    this._router.events.subscribe((event) => { 
    if (event instanceof NavigationEnd){ 
     //TODO: FIX TO RECOGNIZE PREVIOUS ROUTE -- THIS WILL CAUSE DUPLICATE REQUESTING URL 
     let slug = this._activatedRoute.snapshot.params['slug']; 
     this.slug = slug; 
     this.category = this._activatedRoute.snapshot.params['slug']; 
     this.getSeriesList(slug, null); 
    } 
    }) 
} 

ngOnInit(){ 
    let slug = this._activatedRoute.snapshot.params['slug']; 
    this.loading = true; 
    this.category = this._activatedRoute.snapshot.params['slug']; 
    this.getSeriesList(slug,"title"); 
    this.service.setTitle(slug); 
    this.service.setMetaDescription(slug); 
    this.service.setMetaRobots('Index, Follow'); 


this._pageviewService.addPageview(
this.location.path(),"CATEGORY",slug,null) 
    .subscribe(res => {},err => {}); 
} 

getSeriesList(slug, order_by) { 
    this._categoryService.getSeriesByCategory(slug, order_by) 
    .subscribe(
     seriesList => this.seriesList = seriesList, 
     error => this.errorMessage = <any>error); 
} 

onReShuffle(order_by:string){ 
    this.loading = true; 





    this._categoryService.getSeriesByCategory(
    this._activatedRoute.snapshot.params['slug'], order_by) 
    .subscribe(
     seriesList => { 
      this.seriesList = seriesList; 
      this.loading = false; 
     }, 
     error => this.errorMessage = <any>error); 

} 

openPlaylistModal(series) { 
    // todo: open modal and pass series 
    console.log(series); 
    return 
} 

loadMore() { 
    this._httpService.get(this.seriesList.next_url) 
    .subscribe((res) => { 
     var results = res.json(); 
     this.seriesList.result = t 
     this.seriesList.result.concat(results.result); 
     if(results.next_url){ 
      this.seriesList.next_url = results.next_url; 
     } 
     else { 
      this.seriesList.next_url = false; 
     } 
    }); 
    } 
} 

私が間違っていることがわかりません。私が気付いていない、これを行うための他の方法がありますか？

Answer 1

Renderer2を注入することはできませんが、RendererFactory2を実行してRenderer2インスタンスを@Injectable()サービス内に取得することができます。 たとえば、ウェブワーカーで内部的に使用する角度があります。 RendererFactory2.createRenderer方法の

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

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

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

パラメータは次のとおりです：

は、私は以下のコードで問題を解決してきたタイプと

• hostElementタイプとany
• typeRendererType2|null

(null, null)パラメータがここにあることがわかります： https://github.com/angular/angular/blob/e3140ae888ac4037a5f119efaec7b1eaf8726286/packages/core/src/render/api.ts#L129

P.S. Renderer2をサービスに組み込むのは最善の方法ではありません。どのレンダラー操作でも、コンポーネントとディレクティブを処理する必要があります。