Динамический загрузчик компонентов - Как зарегистрировать компоненты из разных модулей? - PullRequest
0 голосов
/ 11 июля 2019

Я внедряю приложение Angular, которое состоит из нескольких модулей: - модуль приложения - общие модули - модуль ядра - различные пользовательские модули

Решение является очень динамичным.DynamicComponentLoader должен создавать мои компоненты.Я следовал описанному здесь подходу: https://angular.io/guide/dynamic-component-loader

Вопрос: Проблема в том, что я не уверен, как зарегистрировать все мои компоненты, потому что они расположены в разных модулях.

enter image description here

SharedModule:

...
/**
 * Implements "forRoot(): ModuleWithProviders"
 * to register all Services in the Root Injector.
 */
@NgModule({
  imports: imports,
  providers: [DynamicComponentService],
  declarations: declarations,
  exports: componentsToExport,
  entryComponents: componentsDynamic,
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: providers
    };
  }

DynamicComponentService

export class DynamicComponentService {

  private dynamicComponents: DynamicComponentDescriptor[] = [];

  constructor() { }

  public addComponents(components: DynamicComponentDescriptor[]) {
    this.dynamicComponents = this.dynamicComponents.concat(components);
  }
  ...
}

DynamicComponentBuilderComponent

export class DynamicComponentBuilderComponent implements OnInit {
  @Input() elementConfig: IElementConfig[];
  @ViewChild(DynamicComponentPlaceholderDirective, { static: true }) placeholder: DynamicComponentPlaceholderDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit() {
    console.log(this.elementConfig);
    // elementConfig contains the component name to create
     ...

    // The ComponentFactory creates an instance of the corresponding component
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(???);

    // ComponentPlaceholderDirective injects ViewContainerRef into its constructor.
    // This is how the directive accesses the element that you want to use to host the dynamic component.
    const viewContainerRef = this.placeholder.viewContainerRef;
    viewContainerRef.clear();

    // To add the component to the template, you call createComponent() on ViewContainerRef.
    // The createComponent() method returns a reference to the loaded component.
    // Use that reference to interact with the component by assigning to its properties or calling its methods.
    const componentRef = viewContainerRef.createComponent(componentFactory);
    // (<AdComponent>componentRef.instance).data = adItem.data;
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...