http - angular 2 (ng2-completer)-避免从组件在服务中注入(inject) 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 注入(inject)，我是否还需要使 Custom Data 也可注入(inject)？

Answer 1

在 CustomData 类之上添加 @Injectable()，然后将其添加到 @NgModule.providers。然后你只需将 CustomData 注入(inject)组件

@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) {}
}