Angular2の依存性注入、サービスは、私が<code>Typescript</code>と<code>angular2</code>を使用しているクラスの継承

Question

中に噴射されていません。私は他のクラスによって継承することができ、ベースクラス内では、サービスが注入されbase classを作成しようとしています。これまでのところ私はuser classへinheritedされbase classに正しくajaxServiceinjectedを取得することはできません。ユーザがインスタンス化され、次いでsave()方法はuserインスタンスから呼び出されたとき、具体的に、base classに次の行：_ajaxServiceが不定であるためreturn _this._ajaxService.send(options);は動作しません。ここで

はbase classを拡張することuser classである：ここでは

import {Base} from '../utils/base'; 

export class User extends Base { 

    // properties 
    id = null; 
    email = null; 
    password = null; 
    first_name = null; 
    last_name = null; 

    constructor(source) { 
    _super.CopyProperties(source, this); 
    } 
} 

はbase classです：

import {Component} from 'angular2/core'; 
import {AjaxService} from './ajax.service'; 

@Component({ 
    providers: [AjaxService] 
}) 

export class Base { 

    constructor(private _ajaxService: AjaxService) { } 

    // methods 
    public static CopyProperties(source:any, target:any):void { 
    for(var prop in source){ 
     if(target[prop] !== undefined){ 
      target[prop] = source[prop]; 
     } 
     else { 
      console.error("Cannot set undefined property: " + prop); 
     } 
    } 
    } 

    save(options) { 
    const _this = this; 
    return Promise.resolve() 
    .then(() => { 
     const className = _this.constructor.name 
          .toLowerCase() + 's'; 
     const options = { 
     data: JSON.stringify(_this), 
     url: className, 
     action: _this.id ? 'PATCH' : 'POST'; 
     }; 

     debugger; 
     return _this._ajaxService.send(options); 
    }); 
    } 
} 

これはそのAjaxServiceは、基本クラスに注入されていないことを除いて正常に動作します。私はユーザーがベースではなくインスタンス化されているので、これは理にかなっていると思います。

Base moduleの中でAjaxServiceを使用するにはどうすればベースモジュールを別のクラスで拡張するのですか？

私は、ユーザーをインスタンス化する場合、ユーザークラスのコンストラクタが呼び出されるが、サービスを注入基本クラスのコンストラクタが呼び出されていないと思います。

はここAjaxServiceです：

import {Injectable} from 'angular2/core'; 

@Injectable() 

export class AjaxService { 

    // methods 
    send(options) { 
    const endpoint = options.url || ""; 
    const action = options.action || "GET"; 
    const data = options.data || {}; 

    return new Promise((resolve,reject) => { 
     debugger; 
     $.ajax({ 
     url: 'http://localhost:3000' + endpoint, 
     headers: { 
      Authentication: "", 
      Accept: "application/vnd.app.v1", 
      "Content-Type": "application/json" 
     }, 
     data: data, 
     method: action 
     }) 
     .done((response) => { 
     debugger; 
     return resolve(response); 
     }) 
     .fail((err) => { 
     debugger; 
     return reject(err); 
     }); 
    }); 

    } 

} 

Answer 1

あなたは注釈を付ける必要があります注入したい角度2における各クラス。コンポーネントでない場合は、@Injectable()注釈で注釈を付ける必要があります。既に他のクラスを挿入しているクラスを挿入する場合は、そのクラスのプロバイダを作成する必要があります。

import {Injectable} from 'angular2/core'; 
import {Base} from './base'; 
@Injectable() 
export class User extends Base { 
} 

私はあなたのためPlunkerを作成し、私はそれはあなたの問題を解決することを願ってい：

http://plnkr.co/edit/p4o6w9GjWZWGfzA6cv41?p=preview

（コンソール出力を見て）

PS。それがベースにサービスを注入しても大丈夫ですが、あなたは関係なく、Userクラスからそれを渡す必要が代わりに約束

Answer 2

観察可能使用してください。ベースからサービスの実際のインスタンスを継承することはできません。そのため、ユーザーからベースに渡す必要があります。これはTypeScriptの制限ではなく、DIの一般的な仕組みの特徴です。

このような何か：

class User extends Base 
    constructor(service: AjaxService) { 
     super(service); 
    } 

ベースは、あなたのためのサービスをインスタンス化する場合は、ユーザーからのインスタンスに影響を与えることができないだろう。これは、依存コンポーネントを別のコンポーネントに委任することで制御が失われるため、DI全体の利点を無効にします。

これはベースでこれを指定することでコードの重複を減らそうとしている可能性があることを理解していますが、これはDIの原則に反します。