在Angular中,我们可以通过使用@Injectable
装饰器为服务提供商提供不同的实例。以下是一个示例:
首先,创建一个服务类MyService
:
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
getMessage() {
return 'Hello World!';
}
}
接下来,创建一个组件类AppComponent
,并在构造函数中注入MyService
:
import { Component } from '@angular/core';
import { MyService } from './my.service';
@Component({
selector: 'app-root',
template: `
{{ message }}
`,
})
export class AppComponent {
message: string;
constructor(private myService: MyService) {
this.message = this.myService.getMessage();
}
}
然后,在你的模块中,使用providers
数组为MyService
提供多个实例。例如:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyService } from './my.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
MyService,
{ provide: MyService, useClass: MyService, multi: true },
{ provide: MyService, useClass: MyService, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
在上面的代码中,我们通过providers
数组提供了两个MyService
的实例,multi: true
表示我们提供了多个实例。
现在,当AppComponent
使用MyService
时,它将使用提供商数组中的第一个实例。如果你想使用不同的实例,你可以使用@Inject
装饰器和@Optional
装饰器来注入不同的实例,如下所示:
import { Component, Inject, Optional } from '@angular/core';
import { MyService } from './my.service';
@Component({
selector: 'app-root',
template: `
{{ message }}
`,
})
export class AppComponent {
message: string;
constructor(
@Optional() @Inject(MyService) private myService: MyService,
@Optional() @Inject(MyService) private myService2: MyService
) {
this.message = this.myService.getMessage();
}
}
在上述代码中,我们使用了两个参数myService
和myService2
来注入不同的MyService
实例。
这样,我们就可以在Angular中创建同一个服务的多个实例了。