Angular 组件：如何强制 parent 组件处理输出？

Question

我有一个 child 组件 FileUploadComponent 可以被多个 parent 组件使用。 FileUploadComponent 有一个输出，我想确保它由所有 parent 个组件处理。

如果输出未由 parent 之一处理，我如何从 FileUploadComponent 抛出异常？

我所说的“由 parent 处理”是什么意思：

<app-file-upload #campaignFiles
    ...
    (documentsLoaded)="onDocumentsLoaded($event)">
</app-file-upload>

感谢您的帮助。

Answer 1

你可以查看EventEmitter的observed 属性:

ngAfterViewInit() {
  if (this.myOutput.observed) {
// we are fine
  } else {
// we have a problem
  }
}

（或者 this.myOutput.observed.length，但已弃用。取决于 RxJS 的版本）。

这是一个堆栈闪电战： https://stackblitz.com/edit/angular-mtkweq?file=src%2Fapp%2Fhello.component.ts

Answer 2

您可以像这样使用选择器进行破解：

@Component({
  selector: 'app-file-upload[documentsLoaded]',
  ...
})

Answer 3

感谢大家的帮助。对于任何来到这个 post 的人，根据接受的答案，我抛出一个错误 + 一个包含 parentComponent 名称（未处理输出的对象）和子组件名称（知道在哪里修复父组件实现）

ngAfterViewInit() {
    // with newer version of RxJS, use observed i/o observers.length as get deprecated
    if (this.documentsLoaded.observers.length == 0) {
      const onComponent = this.activatedRoute.snapshot.routeConfig.component.name;
      const error = `The parent component '${onComponent}' should handle the output 'documentsLoaded' emitted by its child component ${FileUploadComponent.name}`;
      this.toastr.error(error, 'Bad implementation', { disableTimeOut: true, progressBar: false });
      throw error;      
    }
}

Angular 组件：如何强制 parent 组件处理输出？

Angular component: How can I force an output to be handled by parent component?

throw

output

angular