typescript - Angular 2, kombiner spread og barrel for imports

Jeg prøver å rydde opp i koden min og minimere all importkoden jeg må sette opp overalt.

Så i index.ts i tjenestemappen min satte jeg opp en tønne:

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

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

Slik at jeg kan minimere importkoden i app.module.ts ved å bruke spreoperatoren.

...

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

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

export class AppModule { }

Men i some.component.ts kan jeg ikke bruke en enkelt import siden index.ts heller ikke tønner de spesifikke tjenestene.

...

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

Hvordan kan jeg sette opp index.ts for også å eksportere navnene på tjenestene, finnes det en fin og ryddig måte å oppnå dette på?

Svar #1

Du kan gjøre dette:

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

Merk, du trenger ikke å spre commonServices, Angular gjør det automatisk, faktisk kan det være et hvilket som helst nestet array, f.eks. [Service1, [Service2], [[[Service3]]]], Angular vil flate ut alt det.

Relaterte artikler