避免 Angular 中的多个服务实例

Question

我在网上做了一些研究，我发现我面临的问题是正在创建多个服务实例，我想避免这种情况。有人可以看看我的代码并发现我需要做的改变。

使用被复制的主要服务的第二个服务。

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 获取任何值

请告诉我我需要在哪里进行更改

Answer 1

回答我自己的问题：由于导入时文件路径不正确，服务被重复。Windows 允许您使用不区分大小写的文件路径，这可能会在每次使用模块时创建多个实例。

Answer 2

我认为您在使用PrimaryServiceProvider和SecondaryServiceProvider服务进行过度设计。要创建单例服务，只需在装饰器中设置providedIn: 'root'选项，如下所示：Injectable@Injectable({ providedIn: 'root' })export class SecondaryService {}最后，确保不要在任何providers阵列上注册单例服务。在此处查看有关此的官方文档。