如何在 Angular 中使用 DI 为给定类提供实现？答案

【问题标题】：How to provide an implementation for a given class using DI in Angular?如何在 Angular 中使用 DI 为给定类提供实现？
【发布时间】：2021-03-10 15:13:36
【问题描述】：

假设我有 2 个模块，分别称为 A 和 B。

假设我有这门课。它并不真正“属于”任何模块，因为它是一个普通的老式 Typescript 类，而不是 Injectable.

class Greeter {
  constructor(private greeting: string) {}

  greet(name: string) {
    console.log(`${greeting}, ${name}!`);
  }
}

酷。然后，假设模块 A 导出了一个注入 Greeter 实例的组件。

@Component({ ... })
class GreetingComponent {
  name: string;

  constructor(private greeter: Greeter) {}

  greet() { this.greeter.greet() }
}

很好。现在假设模块 B 有一个扩展 Greeter 类的服务。模块 B 导入模块 A。

@Injectable({
  providedIn: 'root'
})
class GentleGreeterService extends Greeter {
  constructor() {
    super('Hello');
  }

  greet(name: string) {
    super.greet(name);
    console.log('How are you doing?');
  }
}

酷。现在，每当我在模块 B 中使用 GreetingComponent 时，我都希望注入一个 GentleGreeterService 实例。但是，我根本没有得到任何实例，而是NullInjectorError: No provider for Greeter。我该如何解决这个问题？

【问题讨论】：

标签： angular angular-dependency-injection

【解决方案1】：

您应该阅读官方文档中有关 providers 的信息 - 我相信他们会比我解释得更好。

长话短说-您只有GentleGreeterService 的提供程序，但没有Greeter 的提供程序。您可以添加一个提供者（即在模块级别，但也在组件级别），它将提供 Greeter 但使用其他一些类（或以其他方式解决它，例如使用工厂）：

providers: [{provide: Greeter, useClass: GentleGreeterService}]

【讨论】：

我明白了。问题是我在一个模块中提供服务并在另一个模块中注入它。我的意思是：模块 A 需要在GreetingComponent 中注入服务。然后模块 B 提供了一个 Greeter 实例（使用您提供的 sn-p）并导入模块 A。我希望模块 B 提供的实例被注入到模块 A 的组件中，但我得到了 NullInjectorError。
我想我可以使用一个工厂来根据路由的 URL 返回正确的服务，但这会很古怪。 stackoverflow.com/questions/59776198/…
我没有完全阅读你的模块设置，但同样的解决方案仍然适用——我很快就提出了一个堆栈闪电战——希望它能反映你的问题：stackblitz.com/edit/angular-xvtjps
谢谢你，我的朋友，这就像一个魅力。毕竟你不是那个新手。