将事件处理程序添加到动态加载的组件

Question

我有两个组件：workflow 和 block。 block 组件使用 directive 和 ComponentFactory.

动态加载到 workflow

block 组件包含一个按钮，我想在单击按钮时向父级 (workflow) 发出一个事件，因此我在 [=21] 中添加了 @Output('onDelete') onDelete = new EventEmitter<boolean>() =] 以便能够发出事件。

我遇到的问题是在 <app-block> 上添加 event handler。我尝试使用 document.getElementsByTagName('app-block').addEventListener('(onDelete)', 'blockDeleted()') 添加它，但它不起作用。

workflow.component.html

<div clas="mainContent">
  <ng-template appWorkflowDirective></ng-template>
</div>

workflow.component.ts

private createNewBlockComponent(event, object): void {
   const componentFactory = this.componentFactoryResolver.resolveComponentFactory(BlockComponent);
   const componentRef = this.workflowsDirective.viewContainerRef.createComponent(componentFactory);

   (<BlockComponent>componentRef.instance).position = new BlockPosition(event.layerX, event.layerY) ;
}

我正在寻找与来自 angular

的 example 相同的行为

Answer 1

一般示例

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(BlockComponent);

const componentRef = this.viewContainerRef.createComponent(componentFactory);

const blockInstance = componentRef.instance as BlockComponent;

blockInstance.onDelete.subscribe(() => {
    this.blockDeleted();
});

这个问题的具体例子

private createNewBlockComponent(event, object): void {
   const componentFactory = this.componentFactoryResolver.resolveComponentFactory(BlockComponent);
   const componentRef = this.workflowsDirective.viewContainerRef.createComponent(componentFactory);

   (<BlockComponent>componentRef.instance).position = new BlockPosition(event.layerX, event.layerY) ;

   (<BlockComponent>componentRef.instance).onDelete.subscribe(() => {
      this.blockDeleted();
   }) ;
}

将事件处理程序添加到动态加载的组件

Add event handler to dynamically loaded component

angular

typescript

dynamically-generated

eventemitter

一般示例

这个问题的具体例子