событие выброса angular2 от динамического дочернего элемента к родительскому

Question

У меня есть дочерний элемент в родительском шаблоне. Ребенок добавляется динамически. От ребенка я хочу вызвать функцию родителей, которая добавляет еще одного ребенка. Для этого я использую @Output, он работает, когда child статичен, но браузер не может скомпилировать страницу, когда child добавляется динамически:

Родитель:

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

loadDragDropComponent() {        
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(
      DragDropComponent
    );        
    let componentRef = this.viewContainerRef.createComponent(componentFactory);                
  }

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

 <div *ngIf="repair_picture" fxLayoutAlign.xs="center" fxLayoutWrap="wrap">
            <!-- static works -->
            <pd-drag-drop (loadComponent)="loadDragDropComponent($event)"></pd-drag-drop>
            <!-- dynamic does not works-->
            <ng-template #dragdrophost (loadComponent)="loadDragDropComponent($event)"></ng-template>
        </div>

Ребенок:

   export class DragDropComponent implements OnInit {
  @Output() loadComponent = new EventEmitter<string>();
......
this.loadComponent.emit('loadComponent');
}

Ошибка компилятора: Привязка события loadComponent не выдается никакими директивами во встроенном шаблоне. Убедитесь, что имя события написано правильно, и все директивы перечислены в «@ NgModule.declarations». (Как видно, возможно динамически загружать компонент -> ОШИБКА -> = "loadDragDropComponent ($ event)">

Answer 1

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

loadDragDropComponent() {        
  let componentFactory = this.componentFactoryResolver.resolveComponentFactory(
    DragDropComponent
  );

  let componentRef = this.viewContainerRef.createComponent(componentFactory);
  componentRef.instance.loadComponent.subscribe($event => {
    this.loadDragDropComponent($event)
  });
}

Вам также необходимо удалить этот материал в вашем шаблоне, который соединяетслушатель, поскольку это не является действительным (то есть (loadComponent)="loadDragDropComponent($event)").

Answer 2

Вам нужно передать некоторую функцию обратного вызова внутри вашего нового компонента.

let componentRef = this.viewContainerRef.createComponent(componentFactory);
componentRef.instance.loadComponent = function() {
    // put your code here
}

И затем вы можете вызвать свой обратный вызов внутри компонента

this.loadComponent();