Angular：我在哪里放置多个模块使用的服务答案

【问题标题】：Angular: where do I put services used by multiple modulesAngular：我在哪里放置多个模块使用的服务
【发布时间】：2021-04-16 02:19:23
【问题描述】：

我刚开始使用 Angular 框架的特性模块 + 延迟加载的路由部分，但有点难以适应这些细微差别。不时出现的一件事是如何存储服务和接口——它们是否应该只放入使用它们的模块的提供者数组中？还是应该将某种主服务模块注入根模块？

我从各种教程中了解到，服务和接口不应该放在核心模块或共享模块中。

我之前在做什么：

//service.module.ts
@NgModule({
    imports: [],
    exports: [],
    declarations: [],
    providers: [],
})
export class ServicesModule {
    static forRoot(): ModuleWithProviders<ServicesModule> {
        return {
            ngModule: ServicesModule,
            providers: [
              all the services
              provided in our application
            ]
        }
    }
}
// then in app.module.ts
imports: [
    ServicesModule.forRoot(),
]

所以我的选择是

保持原样设置，在 app 文件夹中有一个名为“services”的集体目录，并在需要服务的组件中使用构造函数 DI。同样对于模型/接口，从名为“模型”的目录中导入它们。
将服务移动到需要它们的模块中，并且只在 ServicesModule 中提供共享服务，帮助延迟加载模块。

我想一个不同/更简单的问题是，如果我将所有服务移回提供程序数组我的 app.module，这会简化事情吗？似乎违反直觉。

【问题讨论】：

标签： angular typescript lazy-loading ng-modules

【解决方案1】：

如果您将这些全部放在服务模块中并将其导入 AppModule，那么它的行为与 Injectable({ providedIn: 'root' }) 相同。如果服务确实需要全局可访问，则将服务标记为providedIn: 'root' 没有任何问题，而且 Angular 仍然会以某种方式延迟加载，如果没有任何东西注入它，则不会创建该根提供的服务的实例。主要的是，只有一个服务实例被创建并在所有注入它的东西之间共享（除非你在另一个模块/组件的 providers 数组中重新提供它）。

对于某些事情，这种行为是可取的。例如，如果您有一个提供有关当前登录用户的数据的用户服务，那很可能是一种在任何地方都在使用的服务，只需要创建一个实例。所以在这种情况下，providedIn: 'root' 或在AppModule 中提供它是有意义的。

相反，如果您有一个为表组件提供表数据的服务，那么您可能希望在组件级别提供该服务，以便表的每个单独实例都可以访问自己的数据。如果您在根目录下提供此服务，那么每个表都将共享相同的数据。

通常我所做的只是在需要它的组件/模块中提供服务，或者如果它需要在整个应用程序中是单例的，则执行 providedIn: 'root'。

您还可以创建小型“原子”模块，其中模块提供一项服务，然后将该小型模块导入任何需要它的地方，以允许延迟加载。

例如：

@NgModule({
    providers: [TestService]
})
export class TestModule { }

然后，任何具有需要注入该服务的组件/指令/服务/等的模块，您都可以将TestModule 添加到包含该组件/指令/服务/等的模块的imports 数组中。

constructor(private testService: TestService) { }

@NgModule({
    imports: [TestModule]
})
export class ModuleWithComponentThatNeedsTestService { }

【讨论】：

【解决方案2】：

我的另一个想法是为我的任何 web api 定义一个通用服务组件正在与之交互。就像在 react 中一样，使用 hooks 和 useContext：

useFirestore.js
useStorage.js
useAnalytics.js

我不确定这是否好用，因为我看到其他人编写的大多数 Angular src 代码都具有始终特定于他们正在访问的数据库集合或文档的服务。我现在正在考虑，这是否是一个好主意。缺点是这将是一项在我的应用程序中随处调用的大型服务，这当然没有吸引力。

export class FirestoreService {

  collection : AngularFirestoreCollection<any>;

  constructor(
    collectionName : string,
    collectionMetadata : { },
    private afs : AngularFirestore
   ) {
      this.collection = this.afs.collection(collection_name)

 }

  create( new_object : { }) { }
  update( new_object: {} ) { }
  delete( ) { } 
  filter,
  search,
  etc...
  
}

【讨论】：