避免 Angular 中的多个服务实例
Avoid Multiple Instances of Service in Angular
我在网上做了一些研究,我发现我面临的问题是正在创建多个服务实例,我想避免这种情况。有人可以看看我的代码并找出我需要做的更改吗?
第二个服务使用正在复制的主要服务。
export class SecondaryService {
constructor(private primarySvc: IPrimaryService){
this.primarySvc.someSubject.subscribe(() => {});
}
}
主要服务(正在复制的服务)
export class PrimaryService {
someSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
constructor(){}
}
主要服务提供商
@Injectable()
export class PrimaryServiceProvider extends PrimaryService {
constructor(){
super();
}
}
二级服务提供商
@Injectable()
export class SecondaryServiceProvider extends SecondaryService {
constructor(private PrimaryProvider: PrimaryServiceProvider){
super(PrimaryProvider);
}
}
app.module.ts
@NgModule({
declaration: [SecondaryComponent],
exports: [SecondaryComponent],
imports: [BrowserModule],
providers: [SecondaryServiceProvider, PrimaryServiceProvider ]
})
export class SearchModule{}
现在我正在尝试使用我在本地环境中制作的组件,它看起来像这样:
app.module.ts
@NgModule({
declaration: [AppComponent, HomeComponent],
imports: [SearchModule, BrowserModule],
providers: [PrimaryServiceProvider, SecondaryServiceProvider],
bootstrap: [AppComponent]
})
export class AppModule{}
home.component.ts
export class HomeComponent {
constructor( primarySvc: PrimaryServiceProvider,
secondarySvc: SecondaryServiceProvider) {
this.primarySvc.someSubject.next(false);
}
}
现在我确定主要服务有两个实例,因为 someSubject
不同步,并且 SecondarySvc 中的订阅没有从 home.component.ts
中获取任何值
请告诉我我需要在哪里进行更改
谢谢!!
我认为您在使用 PrimaryServiceProvider
和 SecondaryServiceProvider
服务时过度设计了。
要创建单例服务,只需在 Injectable
装饰器中设置 providedIn: 'root'
选项,如下所示:
@Injectable({ providedIn: 'root' })
export class SecondaryService {}
最后,请确保不要在任何 providers
数组中注册单例服务。
查看关于此的官方文档here。
回答我自己的问题:
由于导入时文件路径不正确,服务被复制。 Windows 允许您使用不区分大小写的文件路径,这可能会在每次使用模块时创建多个实例。
我在网上做了一些研究,我发现我面临的问题是正在创建多个服务实例,我想避免这种情况。有人可以看看我的代码并找出我需要做的更改吗?
第二个服务使用正在复制的主要服务。
export class SecondaryService {
constructor(private primarySvc: IPrimaryService){
this.primarySvc.someSubject.subscribe(() => {});
}
}
主要服务(正在复制的服务)
export class PrimaryService {
someSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
constructor(){}
}
主要服务提供商
@Injectable()
export class PrimaryServiceProvider extends PrimaryService {
constructor(){
super();
}
}
二级服务提供商
@Injectable()
export class SecondaryServiceProvider extends SecondaryService {
constructor(private PrimaryProvider: PrimaryServiceProvider){
super(PrimaryProvider);
}
}
app.module.ts
@NgModule({
declaration: [SecondaryComponent],
exports: [SecondaryComponent],
imports: [BrowserModule],
providers: [SecondaryServiceProvider, PrimaryServiceProvider ]
})
export class SearchModule{}
现在我正在尝试使用我在本地环境中制作的组件,它看起来像这样:
app.module.ts
@NgModule({
declaration: [AppComponent, HomeComponent],
imports: [SearchModule, BrowserModule],
providers: [PrimaryServiceProvider, SecondaryServiceProvider],
bootstrap: [AppComponent]
})
export class AppModule{}
home.component.ts
export class HomeComponent {
constructor( primarySvc: PrimaryServiceProvider,
secondarySvc: SecondaryServiceProvider) {
this.primarySvc.someSubject.next(false);
}
}
现在我确定主要服务有两个实例,因为 someSubject
不同步,并且 SecondarySvc 中的订阅没有从 home.component.ts
请告诉我我需要在哪里进行更改
谢谢!!
我认为您在使用 PrimaryServiceProvider
和 SecondaryServiceProvider
服务时过度设计了。
要创建单例服务,只需在 Injectable
装饰器中设置 providedIn: 'root'
选项,如下所示:
@Injectable({ providedIn: 'root' })
export class SecondaryService {}
最后,请确保不要在任何 providers
数组中注册单例服务。
查看关于此的官方文档here。
回答我自己的问题:
由于导入时文件路径不正确,服务被复制。 Windows 允许您使用不区分大小写的文件路径,这可能会在每次使用模块时创建多个实例。