Angular 角度：简化；供应商“；当需要大量服务时

我有一个依赖于多个支持服务的组件，父组件将在其providers数组中“提供”这些服务

如果我需要几个服务，我必须将它们全部添加到providers数组中，并确保它们都被注入到构造函数中，即使它们可能没有被这个父组件直接使用

providers: [
    ServiceA,
    ServiceB,
    ServiceC,
    ServiceD
]
...
constructor(
    private $sa: ServiceA,
    private $sb: ServiceB,
    private $sc: ServiceC,
    private $sd: ServiceD
)

有没有办法将这些服务包装到将要提供的另一个服务中？或者以另一种方式提供这些服务

理想情况下，我可以有一个“控制器”服务，它封装了所有其他服务，只向父级公开必要的内容，然后父级只需提供这个“控制器”

有什么想法吗

---

谢谢

我建议您在一个模块中加入所有这些服务，并将其导入组件模块。一种可能的结构可以是这样的

services/
    |-one.service.ts
    |-two.service.ts
    |-three.service.ts
    |-four.service.ts
    |-services.module.ts
your-module/
    |-your-component.component.css
    |-your-component.component.html
    |-your-component.component.ts
    |-your-module.module.ts
app.component.css
app.component.html
app.component.ts
app.module.ts

在本例中，您有四个服务和services.module.ts，如下所示

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { OneService } from './one.service.ts'
import { TwoService } from './two.service.ts'
import { ThreeService } from './three.service.ts'
import { FourService } from './four.service.ts'

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
  ],
  providers : [
    OneService,
    TwoService,
    ThreeService,
    FourService
  ]
})
export class ServicesModule { }
export * from './one.service';
export * from './two.service';
export * from './three.service';
export * from './four.service';

import { OneService, TwoService, ThreeService, FourService } from '@services'

然后在您的-moude.module.ts中

import { ServiceModule } from '../services/services.module';
...
...
imports : [
    ...
    ...
    ServiceModule
]
...
...

最后在您的-component.component.ts中

import { OneService, TwoService, ThreeService, FourService } from '../../services/services.module'
...
...

    constructor(
        private _oneService : OneService,
        private _twoService : TwoService,
        private _threeService : ThreeService,
        private _fourService : FourService
    ) {}
...
...

您还可以向tsconfig.json添加别名，以避免相对路径

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@services" : [
        "app/services/services.module.ts"
      ],
    },
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

然后您可以按如下方式导入服务

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { OneService } from './one.service.ts'
import { TwoService } from './two.service.ts'
import { ThreeService } from './three.service.ts'
import { FourService } from './four.service.ts'

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
  ],
  providers : [
    OneService,
    TwoService,
    ThreeService,
    FourService
  ]
})
export class ServicesModule { }
export * from './one.service';
export * from './two.service';
export * from './three.service';
export * from './four.service';

import { OneService, TwoService, ThreeService, FourService } from '@services'

---

希望这能对您有所帮助。

请参阅。只需使用：providedIn:“root”来装饰您的服务就足够了，不需要提供程序数组。您可以使容器服务导入其他服务，但我不推荐这样做。主要是为了防止导入未使用的服务，并在导入过程中对服务进行一些有意义的命名component@user3791775感谢您的评论，但问题是我不希望这些服务以根目录的形式提供；我不想要这些服务的单例实例。每次使用组件时，我都需要一个新的本地实例。然后最好使用普通类（无角度服务/可注入）。只需执行此操作即可。myNonSingleTonService=new myPlainTypescriptClass（）在constructor@user3791775我明白了——这可能是一个强有力的解决方案。我会进一步调查的。谢谢