Załaduj NgModule entryComponents dynamicznie za pomocą usługi

Question

Witam Jestem nowy w Angular2 i maszynopisie. Ładuję składniki dynamicznie i zastanawiałem się, czy istnieje sposób deklarowania komponentów przy użyciu usługi w modułach "deklaracje" i "entryComponents".

Korzystanie maszynopis, jestem w stanie to osiągnąć w następujący sposób:

import { ComponentLoaderService } from './../../services/component-loader.service'; 
 

 
let componentsToLoad = ComponentLoaderService.getComponents(); 
 

 
@NgModule({ 
 
    declarations: [ componentsToLoad ], 
 
    entryComponents: [ componentsToLoad ], 
 
}) 
 
export class testModule {}

To faktycznie działa, ale tylko wtedy, gdy mam skompilowane i serwer jest uruchomiony jako pierwszy.

Jeśli próbuję skompilować i uruchomić go, otrzymuję ten błąd stały.

„Wystąpił błąd rozwiązywania wartości symboli statycznie wywołania funkcji nie są obsługiwane rozważyć zastąpienie funkcji lub lambda o powołanie się na eksport. funkcja, "

Moja druga myśl była, czy istnieje sposób na umieszczenie ładowania komponentów w części" export class testModule {} ", aby wypełnić tablicę, a następnie przekazać ją do NgModule?

Z mojego obecnego testu to nie działa, ale wciąż jestem nowy w tym, więc być może czegoś mi brakuje.

Mam nadzieję, że ktoś może pomóc. Dzięki!

Oto kod, który tworzy błąd kompilacji:

Właśnie udało ng nową testową aplikacji.

Następnie w folderze test-app zrobiłem npm install.

Utworzono /src/app/services/components-loader.service.ts.

import { Injectable } from '@angular/core'; 
import { ViewContainerRef, ViewChild, ComponentFactoryResolver } from '@angular/core'; 

@Injectable() 
export class ComponentLoaderService { 
    constructor(private componentFactoryResolver: ComponentFactoryResolver){} 

    static getComponents(components: any[]): any[] { 
     var tmp = Array(); 

     for (var i = 0; i < components.length; ++i){ 
      if (components[i].key == 0){ 
       tmp.push(components[i].component); 
      } 
     } 

     return tmp; 
    } 

    load(container: ViewContainerRef, components: any[]): void { 
     // clear 
     container.clear(); 

     for (var i = 0; i < components.length; ++i){ 
      if (components[i].key == 0 || components[i].key == 'site'){ 
       const childComponent = this.componentFactoryResolver.resolveComponentFactory(components[i].component); 

       // at this point we want the "child" component to be rendered into the app.component: 
       container.createComponent(childComponent);   
      }    
     } 
    } 
} 

Utworzono plik /src/app/components.ts.

import { TestComponent } from './test.component'; 

export const mainComponents = [ 
    { key: 0, component: TestComponent },   
]; 

Utworzono plik /src/app/test.component.ts.

import { Component } from '@angular/core'; 

@Component({ 
    template: `test`, 
}) 
export class TestComponent {} 

I zmodyfikowane /src/app/app.module.ts wyglądać tak.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { mainComponents } from './components'; 
import { ComponentLoaderService } from './services/components-loader.service'; 

let componentsToLoad = ComponentLoaderService.getComponents(mainComponents); 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    componentsToLoad 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent], 
    entryComponents: [ componentsToLoad ], 
}) 
export class AppModule { } 

kiedy mogę skompilować za pomocą ng służyć, otrzymuję ten błąd:

10% building modules 2/2 modules 0 activeError: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in D:/angularjs/test-app/src/app/app.module.ts, resolving symbol AppModule in D:/angularjs/test-app/src/app/app.module.ts

Answer 1

@NgModule({ 
    declarations: [], 
    exports: [] 
}) 
export class testModule { 
    static withComponents(components: any[]) { 
     return { 
      ngModule: testModule, 
      providers: [ 
       {provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: components, multi: true} 
      ] 
     } 
    } 
} 

Inny moduł:

import { ComponentLoaderService } from './../../services/component-loader.service'; 

let componentsToLoad = ComponentLoaderService.getComponents(); 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     testModule.withComponents([ 
      ...componentsToLoad 
     ]) 
    ], 
    declarations: [ 
     AppComponent, 
     ...componentsToLoad 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

Wykorzystując ANALYZE_FOR_ENTRY_COMPONENTS tutaj, jesteś w stanie dodawać wiele komponentów do wpisu NgModule.entryComponents dynamicznie.