angular - บริการที่นำเข้ามาไม่ถูกกำหนดบนคลาสนามธรรม

ฉันได้สร้างคลาสนามธรรม Collection ซึ่งใช้บริการ Database เพื่อเริ่มต้นคอลเลกชันบนฐานข้อมูล ฉันมีอินสแตนซ์ซับคลาสหลายตัวของ Collection ซึ่งทั้งหมดต้องทำการเริ่มต้นฐานข้อมูลเหมือนกัน ดังนั้น Collection จึงเป็นคลาสพื้นฐานชนิดหนึ่ง

น่าแปลกใจที่บริการที่นำเข้า Database เป็น undefined ในตัวสร้างของซับคลาส FooCollection ตัวสร้างของบริการ Database ถูกเรียกแน่นอนก่อนตัวสร้าง 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);
  }
}

นี่ทำให้เกิดคำถามว่าการนำเข้าถูกจัดการอย่างไรในซับคลาสของคลาสนามธรรม

คำตอบ #1

คุณควรจัดเตรียม db ในโมดูลที่มันถูกใช้งาน ควรจัดเตรียมคอลเลกชัน Foo ด้วยเพราะดูจาก plunk

@NgModule({
  providers: [Database, FooCollection]

คำตอบ #2

ฉันไม่สามารถแสดงความคิดเห็นได้ ดังนั้นฉันจึงเขียนไว้ที่นี่ ฉันเพิ่งอัปเกรดแอปจากเวอร์ชัน 2.4.5 เป็น 4.0.0 และตอนนี้ฉันเจอปัญหาเดิม! ฉันมีเซอร์วิสแบบนามธรรม (a) ที่ฝังเซอร์วิสแคช (ในรูปแบบ protected) ในการขยายเซอร์วิสนั้น (b) เพื่อเพิ่มฟังก์ชันการทำงาน

และบริการขยาย (b) ถูกใช้ในตัวแก้ปัญหา

ตัวแก้ไขพยายามเรียกเมธอดในบริการ B ซึ่งใช้หนึ่งในบริการที่ถูกฉีดเข้ามาใน A แต่บริการที่ถูกฉีดเหล่านั้นไม่ถูกกำหนดค่ามา ผมได้ตรวจสอบอีกครั้งแล้ว รันในเวอร์ชัน 2.4.5 - ทำงานได้ดีอย่างสมบูรณ์