angular - Importierter Dienst ist in abstrakter Klasse undefiniert

Ich habe die abstrakte Klasse Collection, die einen Service Database verwendet, um Sammlungen in einer Datenbank zu initialisieren. Ich habe mehrere Unterklasseninstanzen von Collection, die alle die gleiche Datenbankinitialisierung durchführen müssen. Also ist Collection eine Art Basisklasse.

Erstaunlicherweise ist der importierte Dienst Database im Konstruktor der Unterklasse FooCollection undefined. Der Konstruktor des Database-Dienstes wird definitiv vor dem Foobar-Konstruktor aufgerufen.

Warum ist der importierte Dienst auf FooCollection undefiniert?

Ist dies ein Grund für ein Missverständnis oder hängt es mit der Lade-Reihenfolge der Klassen zusammen?

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

BEARBEITEN:

Mir ist aufgefallen, dass das explizite erneute Importieren von Database in FooCollection einwandfrei funktioniert:

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);
  }
}

Dies wirft die Frage auf, wie Importe bei Unterklassen abstrakter Klassen gehandhabt werden.

Antwort #1

Sie sollten db in dem Modul bereitstellen, in dem es verwendet wird. Die Foo-Sammlung sollte ebenfalls bereitgestellt werden, weil siehe den Plunk.

@NgModule({
  providers: [Database, FooCollection]

Antwort #2

Ich kann keinen Kommentar abgeben, also schreibe ich es hier. Ich habe gerade meine App von 2.4.5 auf 4.0.0 aktualisiert, und jetzt habe ich dasselbe Problem! Ich habe einen abstrakten Dienst (a), der einen Cache-Dienst (als geschützt) injiziert, um diesen Dienst (b) zu erweitern und Funktionalität hinzuzufügen.

und der erweiterte Dienst (b) wird in einem Resolver verwendet.

Der Resolver versucht, eine Methode in Service B aufzurufen, die einen der in A injizierten Dienste verwendet. Aber diese injizierten Dienste sind undefiniert. Ich habe es noch einmal überprüft, ausgeführt in 2.4.5 - funktioniert einwandfrei.