Динамическая компиляция и рендеринг существующих компонентов с Angular 5

Question

У меня есть угловое приложение 1.x, которое работает с динамическим макетом. Приложение получает макет JSON с метаданными экрана и просто генерирует скомпилированные компоненты на лету и создает экран.

Соответствующий "важный код" выглядит так:

const element = this.$compile(`<${this.control.type} control="control" data="data"></${this.control.type}>`)(scope);
this.$element.replaceWith(element);

Теперь я пытаюсь перенести это в Angular 5 и понял, что Angular 5 отбросил манипулирование DOM и функциональность $compile.

Я искал все вокруг и нашел решения, которые знают, как визуализировать динамический HTML (например, {{1+1}}) и другие устаревшие материалы (до Angular 5), но не смогли найти подходящее для рендеринга динамически созданных компонентов (и обработка их внутренних привязок).

Есть ли способ, которым я могу достичь такой функциональности

Answer 1

Это способ создать компонент самостоятельно, как angularJS: (Не забудьте уничтожить его! Вызовите destroy() для componentRef, чтобы сделать это)

Родительский компонент:

@ViewChild('componentHolder', { read: ViewContainerRef }) componentHolder: ViewContainerRef;

constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
public createComponent(): void {
          const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
          const componentRef = this.componentHolder.createComponent(componentFactory);
}

Родительский компонент HTML:

<button (click)="createComponent()">Add New MyComponent below</button>
<div #componentHolder ></div>

Добавьте MyComponent в NgModule:

...
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
  ],
  entryComponents: [
    MyComponent
  ],...