我有一个基本服务和两个固有服务:
@Injectable({ providedIn: 'root' })
export class BaseService {
foo(src?: string){
return `speaking from ${src || 'BaseService'}`;
}
}
@Injectable({ providedIn: 'root' })
export class SomeService extends BaseService {
foo(){
return super.foo('SomeService')
}
}
@Injectable({ providedIn: 'root' })
export class AnotherService extends BaseService {
foo(){
return super.foo('AnotherService')
}
}
我希望将它们注入某些组件中并检索三个单独类的实例:
@Component({
selector: 'my-app',
template: `
<div>
<p>Who's there?</p>
<p>{{ base }}</p>
<p>{{ some }}</p>
<p>{{ another }}</p>
</div>
`,
})
export class App {
base: string;
some: string;
another: string;
constructor(base: BaseService, some: SomeService, another: AnotherService) {
this.base = base.foo();
this.some = some.foo();
this.another = another.foo();
}
}
相反,我得到了三个相同类的实例(HTML输出):
Who's there?
speaking from BaseService
speaking from BaseService
speaking from BaseService
看来
...
{ provide: SomeService , useClass: SomeService },
{ provide: AnotherService , useClass: AnotherService },
...
在提供者中将使其起作用。
一个plnkr:https ://next.plnkr.co/edit/BvmppLHRbFbz9CFZ
SomeService
并AnotherService
从中继承装饰器元数据BaseService
,因此angularBaseService
在其位置注入的实例。
这很危险,因为从其中一个实例调用任何实例成员,SomeService
或者AnotherService
从中继承任何实例成员都BaseService
将触发运行时错误。
存档所需行为的最简单方法是从没有装饰器的通用抽象基类继承:
export abstract class AbstractBaseService {
foo(src?: string) {
return `speaking from ${src || 'AbstractBaseService'}`;
}
}
@Injectable({ providedIn: 'root' })
export class BaseService extends AbstractBaseService {
foo() {
return super.foo('BaseService');
}
}
@Injectable({ providedIn: 'root'})
export class SomeService extends AbstractBaseService {
foo() {
return super.foo('SomeService');
}
}
@Injectable({ providedIn: 'root' })
export class AnotherService extends AbstractBaseService {
foo() {
return super.foo('AnotherService');
}
}
我修改了您的plnkr来测试这种方法。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句