时间戳

首页 > 解决方案 > 如何从 * import 动态创建 Angular 模块提供程序列表

angular - 如何从 * import 动态创建 Angular 模块提供程序列表

问题描述

我正在尝试（此时主要是出于好奇）简化将我的服务导入我的模块文件的过程，但我不完全确定它是否可能。似乎有可能，但我正在碰壁。最终目标是能够在另一个文件夹中为我的服务创建一个桶文件，并将该文件中的所有内容导入到引用该桶文件的模块中。这是我想做的一个例子：

import * as SERVICES from './services';
@NgModule({
  imports: [],
  declarations: [],
  providers: [
    ...Object.values(SERVICES)
  ]
})
export class ProjectsModule { }

它特别令人沮丧，因为记录“Object.values（SERVICES）”表明它创建了一个服务对象数组，但角度 CLI 继续抛出“仅允许提供者和类型的实例，得到：[？null？]”。

我尝试过手动迭代 SERVICES 对象，而不是使用 Object.values。我尝试使用 map 函数从 Object.values(SERVICES) 返回的每个值中创建一个提供程序对象。

更令人沮丧的是，以下内容实际上可以正常工作：

providers: [
    SERVICES.Service1,
    SERVICES.Service2,
    SERVICES.Service3
  ]

但这违背了能够在不调整模块导入的情况下更新桶文件的意义。

出于某种原因，将这些属性转换为数组会破坏某些东西。我假设我错过了一些关于打字稿如何实际导入东西的关键信息。我希望我试图做的事情会像这样，只是动态的：

import { service1, service2, service3 } from './services';

const myServices = [
        service1, 
        service2, 
        service3 
];
@NgModule({
  imports: [],
  declarations: [],
  providers: [
    ...myServices
  ]
})
export class ProjectsModule { }

编辑：根据要求，这是我自动生成的桶文件

export * from './project.resolver';
export * from './projects.resolver';
export * from './projects.service';

所有服务都是可注入的，并且不使用新的“providedIn：'root'”语法。

标签： angulartypescriptimport

解决方案

尝试这个

在您的 services.ts 文件中：

export const SERVICES = [
    Service1,
    Service2,
    Service3,
];

然后导入您的 ProjectsModule

import { SERVICES } from './services';

@NgModule({
  imports: [],
  declarations: [],
  providers: [
    ...SERVICES
  ]
})
export class ProjectsModule { }

推荐阅读