Question

这个问题通常是关于扩展或替换组件库中的组件。我将使用一个这样的例子。我们有一个组件库，我们在包含许多UI组件和指令的项目中使用它们。这些组件可以即时转换。小部件将一个翻译服务注入其中，程序员指定他们想要翻译的密钥。一切都很好。

让我们说这个基础翻译服务有方法getTranslation（）来保持简单。

对于我们的大多数产品，基本翻译服务都是开箱即用的。对于其他人，他们想要使用不同的版本。我的第一个想法是定义一个接口，基本翻译/其他项目的服务实现它（对于Spring Java人员来说是正常的）。我正在阅读角度风格指南，该指南说“考虑使用课程而不是界面”。我挖了一段时间才明白为什么（因为我的背景是Java）并且它有意义，因为看起来Angular DI注入工作不同https://github.com/angular/angular/issues/19632。

因此，作为测试，在示例项目中，我创建了一个子类。

import { Injectable } from '@angular/core';
import { BaseTranslationService } from './base-translation.service';

@Injectable()
export class MyTranslationService extends BaseTranslationService {

  constructor() {
    super();
  }

  getTranslation(bundle: string, key: string, params?: any[]): string {

    let translation = super.getTranslation(bundle, key, params);
    return translation + ' from subclass';
  }
}

虽然基本翻译服务还有很多其他方法，但我只是想用一些沙盒来覆盖上面的那个方法。

最后，在消费项目中，我知道更长时间提供BaseTranslationService，而是提供新的：

providers: [ MyTranslationService, etc ]

这不起作用。我在期望BaseTranslationService的所有组件上收到此错误：

NullInjectorError：没有BaseTranslationService的提供者！

然后看来DI不理解MyTranslationService适用于BaseTranslationService。

这应该有用吗？我的设置不正确吗？我是否误解了风格指南？

Answer 1

库中的组件查找使用令牌BaseTranslationService提供的服务。但是你不再拥有这样的代币了。你需要这个：

providers: [ { provide: BaseTranslationService, useClass: MyTranslationService}, etc ]

根据评论进行更新，您应该使用MyTranslationService装饰器注释课程@Injectable，如下所示

@Injectable()
export class MyTranslationService extends BaseTranslationService {
...
}

从库注入器错误扩展角度类

1 个答案: