[英]How can I inject common dependencies into other Angular2 @Injectable classes?
I have created a component base in TypeScript which I would like to share many services. 我已经在TypeScript中创建了一个组件库,我想共享许多服务。
export abstract class ComponentBase<T> {
constructor(protected http:Http, protected router: Router, protected route: ActivatedRoute, protected params: Params) {
}
}
The problem is that I have multiple nested types and so whenever I have to derive any level down the hierarchy. 问题是我有多个嵌套类型,因此每当我必须在层次结构中派生任何级别时。 Each derived type would look something like this passing down the base's injected parameters.
每个派生类型看起来像这样,都是沿着基类的注入参数传递的。
import { Http } from '@angular/http';
import { Router, ActivatedRoute, Params } from '@angular/router';
export class SomeDerivedType extends ComponentBase<SomeType> {
constructor(protected http: Http, protected router: Router, protected route: ActivatedRoute, protected params: Params) {
super(http, router, route, params);
}
}
I have to chain my constructors to satisfy the base class's constructor parameters. 我必须链接我的构造函数,以满足基类的构造函数参数。 This is quite annoying overhead.
这是非常烦人的开销。 Therefore, I have created a
Services
class to hold all the encapsulated dependencies. 因此,我创建了一个
Services
类来保存所有封装的依赖项。
import { Injectable } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Http } from "@angular/http";
@Injectable()
export class Services {
constructor(public http:Http, public router: Router, public route: ActivatedRoute, public params: Params) {
}
}
I thought I should be able to just inject this services class into the components as follows. 我认为我应该能够将这个服务类注入到组件中,如下所示。
import { Services } from './services'
export class SomeDerivedType extends ComponentBase<any> {
constructor(protected services: Services) {
super(services);
}
}
And the component base now looks as follows: 现在,组件库如下所示:
import { Services } from './services';
import { Http } from '@angular/http';
import { Router, ActivatedRoute, Params } from '@angular/router';
export abstract class ComponentBase<T> {
http: Http;
router: Router;
route: ActivatedRoute;
params: Params;
constructor(protected services: Services ) {
this.http = services.http;
this.route = services.route;
this.router = services.router;
this.params = services.params;
}
}
This unfortunately is not working for me, instead I get the following error: 不幸的是,这不适用于我,而是出现以下错误:
(index):63 Error: Error: Can't resolve all parameters for Services: ([object Object], [object Object], [object Object], ?).
(索引):63错误:错误:无法解析服务的所有参数:([对象对象],[对象对象],[对象对象] 、?)。
So, naturally my question is , "Is there a way to have the dependent services (ie. http,router,route, and params services) injected into my services class?" 因此, 我的问题自然是 :“是否可以将依赖服务(即http,router,route和params服务)注入到我的服务类中?”
Well, as it turns out I just missed something about angular that wasn't clear to me. 好吧,事实证明我只是错过了一些我不清楚的关于角度的东西。 I have only been using it for a little while.
我只使用了一段时间。 The problem was actually simple.
问题实际上很简单。 Params is not a service.
参数不是服务。
(index):63 Error: Error: Can't resolve all parameters for Services: ([object Object], [object Object], [object Object], ?). (索引):63错误:错误:无法解析服务的所有参数:([对象对象],[对象对象],[对象对象] 、?)。
The message threw me off because it said can't resolve all. 该消息使我失望,因为它说不能解决所有问题。 I misinterpreted it, as it was really telling me that one of the parameters was not being resolved.
我误解了它,因为它确实告诉我其中一个参数尚未解析。 In my case protected params : Params.
就我而言,受保护的参数:参数。
This code now works beautifully just as I hoped it would by removing the params item. 现在,此代码可以很好地工作,就像我希望通过删除params项一样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.