在Angular 4中使用装饰器内的服务

Question

I have a service as a configuration file where I store all the components that I want to use in my application. All these components need to be loaded into entryComponents from my main component. I want to load the array of components from the service, into the decorator of the main component.

@Injectable() // This is the service, I want to call getComponents() later on.
export class Configuration {
    modules = [
        ChartModule
    ]

    components = [
        PiechartComponent
    ]

    getModules(): NgModule[] {
        return this.modules;
    }

    getComponents(): Component[] {
        return this.components;
    }
};

In the main component I want the following:

@Component({
    selector: 'dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css'],
    entryComponents: Configuration.getComponents() // Here I call the service.
})

Please help!

Answer 1

I have solved this issue by making a barrel and constant at once. That way I don't have to import all my components in the main module (and other files) and I have access to all the arrays and configuration I want to do.

import { TestModule } from './widgets/testmodule/test.module';
import { TestComponent } from './widgets/testmodule/test.component';

Because I want to have all the modules and components in a separate configuration file, I put it in a barrel and constant at the same time. I import all the modules and components in one location.

Now I will add all these modules and components to arrays. Later on I will use these arrays in the decorators of the main module and component.

export const initialization: ConfigurationConfig = {
  modules: [
    TestModule,
    AnotherModule,
    CarModule,
    PocModule
  ],
  entryComponents: Array<any> = [
    TestComponent,
    AnotherComponent,
    CarComponent,
    PocComponent
  ];
}

In my main module I can now import this constant with all the imports from the barrel.

import * as Configuration from './configuration.barrel';

@Component({
  selector: 'df-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  entryComponents: Configuration.initialization.entryComponents
})