导入的服务在抽象类

时间:2017-03-05 22:33:42

标签: angular typescript dependency-injection ionic2

我已经抽象了 Collection 类,它使用服务数据库来初始化数据库上的集合。我有几个 Collection 的子类实例,它们都需要进行相同的数据库初始化。所以 Collection 是某种基类。

令人惊讶的是,导入的服务数据库在子类的构造函数( FooCollection )上是未定义数据库服务的构造函数肯定在Foobar构造函数之前调用。

为什么在 FooCollection 上未定义导入的服务?这是误解的原因还是与类的加载顺序有关?

Collection.ts

import { Database } from '../providers/database';
import {Injectable} from "@angular/core";

@Injectable()
export abstract class Collection {

  public name : string;

  constructor(public db : Database) {
     // db is undefined here -> crash
     db.doSomething();
  }
}

Database.ts

import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';

@Injectable()
export class Database {

  private _db: any = null;

  constructor() {
    console.log('Hello Database Provider');
  }

  public doSomething(): void {
      console.log("doSomething");
  }
}

FooCollection.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Collection} from '../classes/collection';


@Injectable()
export class FooCollection extends Collection{
}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Start } from '../pages/page/start';
import { Database } from '../providers/database';
import { FooCollection } from "../providers/foocollection";

@NgModule({
  declarations: [
    MyApp,
    Start
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Start
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Database,
    FooCollection
   ]
})
export class AppModule {}

Start.ts

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

import { NavController } from 'ionic-angular';

import { FooCollection } from '../../providers/foocollection';

@Component({
  selector: 'page-start',
  templateUrl: 'start.html'
})
export class Start{
  constructor(public navCtrl: NavController, public f: FooCollection ) {
  }
}

修改 我注意到在Database上再次显式导入FooCollection可以正常工作:

import { Injectable } from '@angular/core';
import { Database } from './database';
import 'rxjs/add/operator/map';
import { Store } from '../classes/store';

@Injectable()
export class Calls extends Store {
  constructor(public db : Database) {
    super(db);
  }
}

这就提出了如何在抽象类的子类上处理导入的问题。

2 个答案:

答案 0 :(得分:2)

您应该在使用它的模块中提供db。还应提供Foo集合,因为请参阅plunk

@NgModule({
  providers: [Database, FooCollection]

答案 1 :(得分:0)

我无法评论,所以我在这里写。 我刚刚将我的应用程序从2.4.5升级到4.0.0,现在我面临同样的问题! 我有一个抽象服务(a)注入缓存服务(作为保护) 扩展服务(b)以增加功能。

,扩展服务(b)用于解析器。

解析器尝试在服务B中调用一个方法,该方法使用A中的一个注入服务,但这些注入的服务是未定义的。 我再次检查,在2.4.5中运行 - 像魅力一样工作