Angular DI 和继承：注入基础服务的扩展

Question

我有一个基础服务和两个继承服务：

@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

• 为什么这不起作用？
• 为什么 SomeService、AnotherService 和 BaseService 不是 Angular DI 的唯一标记？

好像放了

...    
{ provide: SomeService , useClass: SomeService },
{ provide: AnotherService , useClass: AnotherService },
...

在提供程序中将使其工作。

• 为什么明确需要这样做？

一个plnkr：https://next.plnkr.co/edit/BvmppLHRbFbz9CFZ

Answer 1

SomeService 和 AnotherService 从 BaseService 继承装饰器元数据，因此 Angular 会在其位置注入 BaseService 的实例。

这是危险的，因为从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');
  }
}

我modified your plnkr来测试这个方法。