Question

我有一个'商店'服务，依赖于'repo'服务。我的组件使用该服务。 “商店”服务似乎注入得很好，但它注入的repo服务似乎是一个功能而不是一个对象。我怀疑它与JS的执行顺序有关，但我无法弄明白。

为了搜索引擎的好处：我得到的错误信息是“'XXX'不是函数”。我试图访问注入的repo上的函数时得到它。

以下是一些代码：

app.module：

import { ServiceCallListComponent } from './service-call-list/service-call-list.component';
import { AppComponent } from './app.component';
import { ServiceCallsDataRepository } from './data/service-call.repo'
import { SERVICE_CALLS_DATA_REPO } from './data/service-call.repo.token'
import { LocalServiceCallsDataRepository } from './data/service-call.repo.local';
import { ServiceCallsStore } from './data/serivce-call.store';

@NgModule({
  declarations: [
    AppComponent,
    ServiceCallListComponent,
  ],
  imports: [... ],
  bootstrap: [AppComponent],
  providers: [{ provide: SERVICE_CALLS_DATA_REPO, useValue: LocalServiceCallsDataRepository },
    ServiceCallsStore, LocalServiceCallsDataRepository,

  ],
})
export class AppModule { }

service-call.store

import { Injectable, Inject } from '@angular/core';
import { Observable, Observer, Subject, BehaviorSubject } from 'rxjs/rx';
import { ServiceCall } from './service-call.model'
import { ServiceCallsDataRepository, StoreResultsRange } from './service-call.repo'
import { SERVICE_CALLS_DATA_REPO } from './service-call.repo.token'
import { LocalServiceCallsDataRepository } from './service-call.repo.local'

@Injectable()
export class ServiceCallsStore {
   // repo: LocalServiceCallsDataRepository;
    constructor( @Inject(SERVICE_CALLS_DATA_REPO) private repo: ServiceCallsDataRepository) {
    //     constructor(  private repo: LocalServiceCallsDataRepository) {
        //constructor() {
         //this.repo=new LocalServiceCallsDataRepository();
    }

    public getSerivesCallsObservable(filter: BehaviorSubject<string>, range: Observable<StoreResultsRange>): Observable<Array<ServiceCall>> {
        let b = this.repo.getServiceCalls2();
        let observable = filter.map(fltr => this.repo.getServiceCalls2().filter(sc => sc.name.indexOf(fltr) > -1));
        // range.subscribe(rng => this.repo.load(filter.getValue(), rng))
        return observable;
    }

    public add(serviceCall: ServiceCall): void {
        this.repo.add(serviceCall);
    }
}

服务call.repo

   import { Injectable, Inject } from '@angular/core';
    import { Observable, Observer, Subject, BehaviorSubject } from 'rxjs/rx';
    import { ServiceCall } from './service-call.model'
    import { ServiceCallsDataRepository, StoreResultsRange } from './service-call.repo'
    import { SERVICE_CALLS_DATA_REPO } from './service-call.repo.token'
    import { LocalServiceCallsDataRepository } from './service-call.repo.local'

    @Injectable()
    export class ServiceCallsStore {
                constructor( @Inject(SERVICE_CALLS_DATA_REPO) private repo: ServiceCallsDataRepository) {
        //     constructor(  private repo: LocalServiceCallsDataRepository) {
        }

        public getSerivesCallsObservable(filter: BehaviorSubject<string>, range: Observable<StoreResultsRange>): Observable<Array<ServiceCall>> {
            let b = this.repo.getServiceCalls2();
            let observable = filter.map(fltr => this.repo.getServiceCalls2().filter(sc => sc.name.indexOf(fltr) > -1));
            // range.subscribe(rng => this.repo.load(filter.getValue(), rng))
            return observable;
        }

        public add(serviceCall: ServiceCall): void {
            this.repo.add(serviceCall);
        }
    }

服务call.repo.local

import { Injectable, Inject } from '@angular/core';
import { Observable, Observer, Subject, BehaviorSubject } from 'rxjs/rx';
import { ServiceCall } from './service-call.model'
import { ServiceCallsDataRepository,StoreResultsRange } from './service-call.repo'

@Injectable()
export class LocalServiceCallsDataRepository implements ServiceCallsDataRepository {
    private data: Array<ServiceCall> = new Array<ServiceCall>();
    private serviceCalls = new BehaviorSubject<Array<ServiceCall>>(new Array<ServiceCall>());
    constructor() {
    }

    public getServiceCalls2(): Array<ServiceCall> {
        return this.data;//this.serviceCalls.getValue();
    }

    public add(serviceCall: ServiceCall): void {
        throw "not implemented";
    }

    public load(filter: string, range: StoreResultsRange): void {
        throw "not implemented";

        //this.serviceCalls.next(this.data);
    }
}

服务call.repo.token

import { OpaqueToken } from '@angular/core';

export let SERVICE_CALLS_DATA_REPO = new OpaqueToken('SERVICE_CALLS_DATA_REPO');

Answer 1

尝试使用useClass代替useValue。像这样：

{ provide: SERVICE_CALLS_DATA_REPO, useValue: LocalServiceCallsDataRepository }

Angular 2 DI Injects功能而不是对象

1 个答案: