Website-Suche

typescript - Angular 2, Spread und Barrel für Imports kombinieren

Ich versuche, meinen Code aufzuräumen und den gesamten Importcode zu minimieren, den ich überall einrichten muss.

Also habe ich in index.ts in meinem Services-Ordner ein Barrel eingerichtet:

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

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

Damit ich den Importcode in app.module.ts mithilfe des Spread-Operators minimieren kann.

...

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

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

export class AppModule { }

Aber in some.component.ts kann ich keinen einzelnen Import verwenden, da index.ts die spezifischen Dienste nicht ebenfalls bündelt.

...

// 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 {
}

Wie kann ich index.ts so einrichten, dass auch die Namen der Dienste exportiert werden? Gibt es einen schönen, sauberen Weg, dies zu erreichen?

Antwort #1

Du kannst das tun:

// 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";

Beachte, du musst commonServices nicht verbreiten, Angular macht das automatisch, tatsächlich könnte es ein beliebiges verschachteltes Array sein, z.B. [Service1, [Service2], [[[Service3]]]], Angular wird das alles flach machen.

Verwandte Artikel