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

Question

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

这是我目前的代码：

<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

所以我将其添加到我的 parent 组件中

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

这对 child destroy$ = new Subject();