Question

我在父模板中有子元素。子动态添加。从孩子我想叫父母的功能，这增加了另一个孩子。我使用@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');
}

编译器错误：事件绑定loadComponent未由嵌入式模板上的任何指令发出。确保事件名称拼写正确，并且所有指令都列在“@ NgModule.declarations”中。（“显示，可以动态加载组件 - ＆gt; 错误 - ＆gt; =“loadDragDropComponent（$ event）”＆gt;

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();

angular2从动态子级向父级

2 个答案: