如何在 Angular 中使用 DI 为给定的 class 提供实现?
How to provide an implementation for a given class using DI in Angular?
假设我有 2 个模块,分别称为 A 和 B。
假设我有这个class。它并不真正“属于”任何模块,因为它是一个普通的旧 Typescript class 而不是 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
class 的服务。模块 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
。我该如何解决这个问题?
您应该在官方文档中阅读有关 providers 的内容 - 我相信他们会比我解释得更好。
长话短说 - 您只有 GentleGreeterService
而不是 Greeter
的提供商。您可以添加一个提供程序(即在模块级别,但也在组件级别),它将提供 Greeter
但使用其他一些 class (或以其他方式解决它,例如使用工厂):
providers: [{provide: Greeter, useClass: GentleGreeterService}]
假设我有 2 个模块,分别称为 A 和 B。
假设我有这个class。它并不真正“属于”任何模块,因为它是一个普通的旧 Typescript class 而不是 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
class 的服务。模块 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
。我该如何解决这个问题?
您应该在官方文档中阅读有关 providers 的内容 - 我相信他们会比我解释得更好。
长话短说 - 您只有 GentleGreeterService
而不是 Greeter
的提供商。您可以添加一个提供程序(即在模块级别,但也在组件级别),它将提供 Greeter
但使用其他一些 class (或以其他方式解决它,例如使用工厂):
providers: [{provide: Greeter, useClass: GentleGreeterService}]