angular2 从动态子级向父级发出事件答案

【问题标题】：angular2 emit event from dynamic child to parentangular2 从动态子级向父级发出事件
【发布时间】：2018-10-06 02:28:38
【问题描述】：

我在父模板中有子元素。孩子是动态添加的。从孩子我想调用父母功能，这增加了另一个孩子。我为此使用@Output，它可以在子静态时工作，但浏览器无法编译页面，当动态添加子时：

家长：

@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');
}

Compiler error:
Event binding loadComponent not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("eady shown, it is possible to dynamically load component-->
                    <ng-template #dragdrophost [ERROR ->](loadComponent)="loadDragDropComponent($event)"></ng-template>

【问题讨论】：

嗨，你能分享一下编译器错误吗？
@AbelValdez 上面共享的错误

标签： angular components eventemitter

【解决方案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)"）。

【讨论】：

如果组件是使用createEmbeddedView()创建的呢？因为在这种情况下，我们不会componentRef.instance？

【解决方案2】：

您需要在新组件中传递一些回调函数。

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

然后你可以在组件内部调用你的回调

this.loadComponent();

【讨论】：

这不是使用@Outputs 和发射事件。
问题是，当我这样使用它时，甚至无法编译代码：code code 错误：嵌入模板上的任何指令未发出事件绑定 loadComponent。确保事件名称拼写正确，并且所有指令都列在“@NgModule.declarations”中。 ("显示出来了，可以动态加载组件--> ](loadComponent)="loadDragDropComponent($event)">
@niio 当你动态创建组件时，它位于“entryComponents”内，你没有一些东西，比如 onInit 钩子、输入、输出。即使在 ngx-bootstrap 模态中，您也需要使用 modalInstance 在 .content 中传递所有这些东西，而不是 Input 和 decoratore。
@niio 并使用我的方法，您需要从 tempate (loadComponent) 事件中删除并在子组件类中添加 loadComponent 方法定义。如果您从父类调用某些方法或道具，您可能还需要使用 .bind() 函数