Question

我正在尝试清理我的代码并尽量减少我必须在任何地方设置的所有导入代码。

所以在我的服务文件夹中的 index.ts 中，我设置了一个简单的：

import { Service1} from "./service1.service";
import { Service2 } from "./service2.service";
import { Service3 } from "./service3.service";

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

这样我就可以使用点差运算符最小化 app.module.ts 中的导入代码。

...

import { commonServices } from "./common/services";

@NgModule({
    ...
    providers: [
        ...commonServices,
    ]
})

export class AppModule { }

但在 some.component.ts 中，我无法使用单一导入，因为index.ts也没有使用特定服务。

...

// This doesn't work
// import { Service1, Service2 } from "../../core/services";

// I have to do this
import { Service1 } from "../../core/services/service1.service";
import { Service2 } from "../../core/services/service2.service";

@Component({
})
export class SomeComponent {
}

如何设置index.ts以导出服务的名称，是否有一个很好的干净方法来实现这一目标？

Answer 1

你可以这样做：

// index.ts
export { Service1} from "./service1.service";
export { Service2 } from "./service2.service";
export { Service3 } from "./service3.service";

// app.module.ts
import * as commonServices from "./common/services";
  ...
  providers: [
    Object.keys(commonServices).map(svc => commonServices[svc]),
  ]

// some.component.ts
import { Service1, Service2 } from "../../core/services";

注意，您不需要传播 commonServices ，Angular会自动执行此操作，实际上它可以是任何嵌套数组，例如[Service1, [Service2], [[[Service3]]]]，Angular会把所有这些都弄平。

Angular 2，结合传播和桶进口

1 个答案: