Angular 2将服务注入扩展类（BaseRequestOptions）答案

【问题标题】：Angular 2 inject service into extended class(BaseRequestOptions)Angular 2将服务注入扩展类（BaseRequestOptions）
【发布时间】：2017-01-11 06:17:54
【问题描述】：

我有以下代码扩展 BaseRequestOptions 类：

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

@Injectable()
export class AppRequestOptions extends BaseRequestOptions {
    constructor(private serviceA:ServiceA) {       
        super();        
    }   
    merge(options?: RequestOptionsArgs): RequestOptions {        
        console.log(this.serviceA);
        //this.serviceA.myCustomMethod();
        return super.merge(options);
    }
}

当我引用this.serviceA 时，值为undefined。当我将相同的服务注入其他服务/组件时，它按预期工作。

这是完整的引导代码：

import { Injectable } from '@angular/core';
import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS  } from './routes';
import { HTTP_PROVIDERS, BaseRequestOptions, RequestOptions, RequestOptionsArgs, Headers } from '@angular/http';
import { ServiceA } from './ServiceA';

@Injectable()
export class AppRequestOptions extends BaseRequestOptions {
    constructor(private serviceA:ServiceA) {       
        super();        
    }   
    merge(options?: RequestOptionsArgs): RequestOptions {        
        console.log(this.serviceA);
        //this.serviceA.myCustomMethod();
        return super.merge(options);
    }
}

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,  
    ServiceA,
    { provide: RequestOptions, useClass: AppRequestOptions }
]).catch(err => console.error(err));

ServiceA 声明：

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

@Injectable()
export class ServiceA {
    myCustomMethod() {
     
    }
}

我使用的是 Angular 版本 2.0.0-rc.4

我不确定是不是因为我正在扩展一个类并将其标记为@Injectable()？

我已经检查过，我能找到的唯一相关问题是：

Inject service inside a service inside a service in my Angular 2 application

Angular 2: Inject Service to another service. (No provider error)

更新

似乎它与一个开放的错误有关：https://github.com/angular/angular/issues/8925

【问题讨论】：

你用的是哪个版本的Angular2？
@ThierryTemplier 我正在使用 2.0.0-rc.4
AppRequestOptions 不是@Injectable。
是的，很确定，因为 AppRequestOptions 未标记为可注入。 estus 请做出你的回答:)
@estus 我已更新我的代码以将其标记为可注入，但它仍然无法正常工作。

标签： typescript dependency-injection angular

【解决方案1】：

对此有一个未解决的错误：https://github.com/angular/angular/issues/9758。

虽然正确设置了依赖注入的元数据，但该元素并未在构造函数级别提供给类实例。

@Injectable()
export class AppRequestOptions extends BaseRequestOptions {
  constructor(private serviceA:ServiceA) {       
    super();        
    console.log(Reflect.getMetadata('design:paramtypes', AppRequestOptions));
    console.log(Reflect.getMetadata('parameters', AppRequestOptions));
  }

  (...)
}

查看此 plunkr 了解更多详情：https://plnkr.co/edit/hcqAfsI7u88jbjScq6m3?p=preview。

编辑

如果您使用 RequestOptions 类而不是 BaseRequestOptions 类，它将起作用：

@Injectable()
export class AppRequestOptions extends RequestOptions {
  constructor(private serviceA:ServiceA) {       
    super();        
  }   

  (...)
}

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

【讨论】：

好像和这个github.com/angular/angular/issues/8925特别相关
是的，它也适用于 Class RequestOptions 而不是 BaseRequestOptions ;-) 我相应地更新了我的答案......
谢谢，更新扩展 RequestOptions 解决了我的问题。

【解决方案2】：

这与我在这里回答的问题非常相似：Injected dependency is undefined when extending BaseRequestOptions

在定义您的提供者时，还要定义所需的依赖项，因此您的提供者定义中的对象如下所示：

{
 provide: RequestOptions,
 useClass: AppRequestOptions,
 deps: [ServiceA]
}

【讨论】：