0

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

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

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

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

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

providers: [ControllerService]
...
constructor(private $cont: ControllerService)

有任何想法吗？

谢谢

4

1 回答 1

0

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

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';

然后在 your-moudle.module.ts

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

最后在 your-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 { OneService, TwoService, ThreeService, FourService } from '@services'

希望这可以帮到你。

于 2020-09-02T01:04:24.577 回答