Angular 2，为导入组合spread和barrel

Question

我正试图清理我的代码，并尽量减少所有的导入代码，我必须设置到处

所以在 index.ts 在我的services文件夹中我设置了一个目录:

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会把这些都平铺。