Angular Создание компонента во время выполнения и необходимо добавить в него данные

Question

Я использую Angular 7/8 и у меня есть код с добавлением нового компонента, поэтому в родительском компоненте у меня есть:

PARENT COMPONENT

В файле .ts у меня есть:

  @ViewChild(InjectDirective) injectComp: InjectDirective;

  constructor (private componentFactoryResolver: ComponentFactoryResolver) {}


  addComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    viewContainerRef.createComponent(componentFactory);
  }

И в .html у меня есть:

<button (click)="addComponent()">Add Component</button>

У меня также есть директива:

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInject]'
})
export class InjectDirective {

  constructor(public viewContainerRef: ViewContainerRef) {}

}

И, наконец, дочерний компонент:

ДЕТСКИЙ КОМПОНЕНТ:

Тогда в дочернем компоненте у меня есть:

  export class ChildComponent implements OnInit {

  @ViewChild('viewer') private viewer: ElementRef;

}

, а в html просто:

<div>I AM A COMPONENT</div>

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

Как это сделать:

Answer 1

вы можете использовать instance свойство ComponentRef, возвращаемое viewContainerRef.createComponent(componentFactory);

  addComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const compRef = viewContainerRef.createComponent(componentFactory);
    compRef.instance.someProperty = "some data";
  }

вот рабочая демоверсия https://stackblitz.com/edit/angular-lusfbj