如何使用 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

所以我將它添加到我的父組件中

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

這給孩子destroy$ = new Subject();