typescript - Angular 2 injicerad tjänst i en annan tjänst är undefined


Jag försöker skapa ett litet ramverk för att göra det lättare för mig att implementera CRUD-funktionalitet.

Därför har jag skapat en BaseHttpService på detta sätt:

... <imports> ...
@Injectable()
export class BaseHttpService {
  constructor(
    private http: Http
  ) {
    console.log('ctor');
    this.apiUrl$.subscribe(apiUrl => this.rootApiUrl = apiUrl.removeTrailingSlash());
  }
  public getPagedResultOfType<T extends IBaseEntity>(url: string, vm: ISearchVm<T>, options?: RequestOptions): Observable<PagedResult<T>>{ ... <implementation> ... }
  ... <other methods> ...
}

Sedan har jag min BaseEntityReadOnlyService som använder denna BaseHttpService för att skapa Läs-funktionaliteten i CRUD:

@Injectable()
export class BaseAppSumEntityReadOnlyService<T extends IBaseEntity>{
  constructor(
    @Inject(forwardRef(() => BaseHttpService)) public baseHttpService: BaseHttpService
    // public baseHttpService: BaseHttpService
  ) { 
    console.log('ro ctor');
    console.log(this.baseHttpService); // <-- this is always undefined
  }

  getAll(vm: ISearchVm<T>): Observable<PagedResult<T>>{
    const url = `${this.baseUrl}`;
    console.log(this.baseHttpService);
    return this.baseHttpService.getPagedResultOfType<T>(url, vm); // <-- this fails because baseHttpService is undefined: Cannot read property 'getPagedResultOfType' of undefined
  }
  ... <more methods>
}

I mitt FrameworkModule har jag försökt mycket:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    CommonModule,
    HttpModule
  ],
  providers: [
    BaseHttpService,
    // BaseAppSumEntityReadOnlyService
    { provide: BaseAppSumEntityReadOnlyService, useClass: BaseAppSumEntityReadOnlyService, deps: [ BaseHttpService ] },
  ]
})
export class AppSumFrameworkModule { }

Detta är vad jag har just nu, men det fungerar inte. Felet jag får är:

Kan inte läsa egenskapen 'getPagedResultOfType' av undefined

Hur kan jag få BaseHttpService att injiceras i min BaseAppSumEntityReadOnlyService?

Svar #1

Importera din tjänst så här:

import { BaseHttpService} from '../servicePath';

Deklarera det då så här i din konstruktor:

constructor(
    private baseHttpService: BaseHttpService
  ) { 
    console.log(this.baseHttpService); 
  }

Låt mig veta om det fungerar så här, och om inte, kopiera/klistra in konsolfelmeddelandet, tack. :D

Redigera 1:

Tjänst: BaseHttpService

... <imports> ...
@Injectable()
export class BaseHttpService {
  constructor(
    private http: Http
  ) {
    console.log('ctor');
    this.apiUrl$.subscribe(apiUrl => this.rootApiUrl = apiUrl.removeTrailingSlash());
  }
  public getPagedResultOfType<T extends IBaseEntity>(url: string, vm: ISearchVm<T>, options?: RequestOptions): Observable<PagedResult<T>>{ ... <implementation> ... }
  ... <other methods> ...
}

Tjänst: BaseAppSumEntityReadOnlyService

@Injectable()
export class BaseAppSumEntityReadOnlyService<T extends IBaseEntity>{
  constructor(
    private baseHttpService: BaseHttpService
  ) { 
    console.log('ro ctor');
    console.log(this.baseHttpService); // <-- this is always undefined
  }

  getAll(vm: ISearchVm<T>): Observable<PagedResult<T>>{
    const url = `${this.baseUrl}`;
    console.log(this.baseHttpService);
    return this.baseHttpService.getPagedResultOfType<T>(url, vm); // <-- this fails because baseHttpService is undefined: Cannot read property 'getPagedResultOfType' of undefined
  }
  ... <more methods>
}

Modul:

@NgModule({
  declarations: [
    myComponent
  ],
  imports: [
    CommonModule,
    HttpModule
  ],
  providers: [
    BaseHttpService,
    BaseAppSumEntityReadOnlyService,
  ]
})
export class AppSumFrameworkModule { }

Komponent: myComponent

... <imports> ...
@Component()
export class myComponent {
 constructor(
    private baseAppService: BaseAppSumEntityReadOnlyService
  ) { 
    console.log(this.baseAppService); 
  }
}