Angular2 使用从基类导入的库

Question

"angular2": "2.0.0-beta.17",

我希望能够在我的Base 中使用import { Http, Response } from 'angular2/http'; 并在子类中使用http。

有没有办法做到这一点？

附：我不是在寻找“干净”的解决方案，欢迎使用黑客、变通方法和类似的东西

基类：

import { Http, Response } from 'angular2/http';

export class ServiceBase {
  constructor (private http: Http) {}

}

还有一个子类：

import { ApiServiceBase } from '../../api-service-base';
import { Injectable }     from 'angular2/core';
// import { Http, Response } from 'angular2/http';
import { AuthUser }       from './auth_user';
import { Observable }     from 'rxjs/Observable';
import { Headers, RequestOptions } from 'angular2/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class LoginService extends ApiServiceBase {
  constructor () {
    super();
  }
  private url = 'http://localhost:8080/api/signin';

  login (user: AuthUser): Promise<AuthUser> {
    let body = JSON.stringify(user);
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this.http.post(this.url, body, options)
               .toPromise()
               .then(this.extractData)
               .catch(this.handleError);
  }

  private extractData(res: Response) {
    console.log(res);
    if (res.status < 200 || res.status >= 300) {
      throw new Error('Bad response status: ' + res.status);
    }
    let body = res.json();
    return body.data || { };
  }

  private handleError (error: any) {
  }
}

Answer 1

Angular2 不支持使用父类定义子类的依赖注入。

如果您想在父类中使用http 实例，您唯一可以在这里做的事情：

@Injectable()
export class LoginService extends ApiServiceBase {
  constructor (http:Http) {
    super(http);
  }

  (...)
}

编辑

解决方法包括定义一个自定义装饰器来设置依赖注入的元数据：

export function CustomInjectable(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('design:paramtypes', parentTarget);

    Reflect.defineMetadata('design:paramtypes', parentAnnotations, target);
  }
}

它将利用来自父构造函数的元数据，而不是它自己的。您可以在子类上使用它：

@Injectable()
export class BaseService {
  constructor(protected http:Http) {
  }
}

@CustomInjectable()
export class TestService extends BaseService {
  constructor() {
    super(arguments);
  }

  test() {
    console.log('http = '+this.http);
  }
}

看到这个 plunkr：https://plnkr.co/edit/DIMyUB6rCE5d78dPlPZB?p=preview。