角度2（ng2-completer） - コンポーネントからのサービスにおけるhttp依存性注入を避ける

Question

ng2-Completerのカスタムデータ実装を記述しました。

import {Inject} from "@angular/core"; 
import {Http, Response} from "@angular/http"; 
import {Subject} from "rxjs/Subject"; 

import {CompleterData, CompleterItem} from "ng2-completer"; 

export class CustomData extends Subject<CompleterItem[]> implements CompleterData { 

    constructor(private http: Http) { 
     super(); 
    } 
    public search(searchTerm: string): void { 
     this.http.get("http://localhost:5002/api/v1/Search?keyword=" + searchTerm) 
      .map((res: Response) => { 
       let data = res.json(); 
       let matches: CompleterItem[] = data.map((result: any) => { 
        return { 
         title: result.name, 
         originalObject: result 
        } 
       }); 
       this.next(matches); 
      }) 
      .subscribe(); 
    } 

    public cancel() { 
    } 
} 

、私のコンポーネントで、私は

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { HomeService } from '../home/home.service'; 
import { FactoryService } from '../factory/factory.service'; 
import { SupplierService } from '../supplier/supplier.service'; 
import { BusinessAreaService } from '../business-area/business-area.service'; 
import { CustomData } from './custom-data'; 
import {CompleterData, CompleterItem} from "ng2-completer"; 
import { SearchItem } from "./search.item"; 
import { Http } from '@angular/http'; 


@Component({ 
    moduleId: module.id, 
    templateUrl: "./home.component.html", 
    styleUrls: ["./home.component.css"] 
}) 

export class HomeComponent implements OnInit { 
    factories: any; 
    suppliers: any; 
    businessAreas: any; 
    private searchStr: string; 
    private customData: CustomData; 
    errorMessage; 

    constructor(private http: Http, private homeService: HomeService, private factoryService: FactoryService, private supplierService: SupplierService, private businessAreaService: BusinessAreaService, private router: Router) { 
     this.customData = new CustomData(http); 
    } 

    ngOnInit(): void { 
     this.getAllFactories(); 
     this.getAllSupplier(); 
     this.getAllBusinessAreas(); 
    } 
} 

ような何かをやっている私は、コンポーネントにのみCustomDataでHTTP注入を避けることができる方法はあり、私もカスタムデータは、注射にする必要がありますか？

Answer 1

CustomDataクラスの上に@Injectable()を追加し、@NgModule.providersに追加します。次に、あなただけのこれはアプリケーション全体で同じCustomDataインスタンスが利用できるようになりますコンポーネント

@Injectable() 
class CustomData {} 

@Component({}) 
class MyComponent { 
    constructor(private data: CustomData) {} 
} 

@NgModule({ 
    providers: [ CustomData ] 
}) 
class SomeModule {} 

にCustomDataを注入します。各コンポーネントはCustomDataの新しいインスタンスを取得したい場合は、@Component.providers代わり

@Component({ 
    providers: [ CustomData ] 
}) 
class MyComponent { 
    constructor(private data: CustomData) {} 
}