angular - 如何在Angular 9中使用“延迟加载”使用子组件的事件属性绑定父组件

Question

我正在将一些组件转换为在 Angular 9中lazily loaded使用。ivy compiler

这是我目前的代码：

<bulk-user-upload [visible]="bulkUserUploadVisible (fileUploaded)="onBulkUserUploadFileUploaded($event)">

我正在尝试将代码修改为：

<ng-container #bulkUserUpload></ng-container>

我想访问fileUploaded子组件中存在的函数，以便可以在父组件上监听事件。

const { BulkUserUploadComponent } = await import('../bulk-user-upload/bulk-user-upload.component');
const bulkUserUploadFactory = this.cfr.resolveComponentFactory(BulkUserUploadComponent);
const { instance } = this.bulkUserUploadContainer.createComponent(bulkUserUploadFactory, null, this.injector);

instance.visible = true;

如何修改上面的代码以便我可以访问子函数？

Answer 1

所以我将它添加到我的父组件中

instance.fileUploaded.pipe(
      takeUntil(instance.destroy$)
    ).subscribe(resp => this.onBulkUserUploadFileUploaded(resp));

这给孩子 destroy$ = new Subject();