在订阅中调用时未发出 EventEmitter

Question

我尝试将表单从我的 child 组件传递到他的 parent。

Child TS:

@Output() submit: EventEmitter<FormGroup> = new EventEmitter();

updateStream(): void {
    const body = {some data};

    // If I put this.submit.emit(this.form) here it works

    this.apiGatewayService.verifyKeys(body).subscribe(
       (res) => {
        console.log('SUCCESS verify : ', res);
        this.submit.emit(this.form); // doesn't work
      },
      (error) => {
        console.log('ERROR verify : ', error);
        this.disableLoader.emit(); // doesn't work
      });
}

html :

<child (submit)="updateStream($event)"></child>

Parent 技术人员：

 updateStream(form: formGroup): void {
    console.log('UPDATE');
  }

我所有发送到订阅的内容都不起作用（未显示 parent 中的 console.log 组合）。但是在订阅之外它仍然有效。

你有想法吗？

编辑

问题出在 this.apiGatewayService.verifyKeys(body) 行。此调用完美运行（正确响应），但发射不起作用。但是，如果我像这样模拟这个调用，它会起作用：

updateStreamOut(): void {
    this.test().subscribe(
      (res) => {
        console.log('SUCCESS verify : ', res);
        this.submit.emit(this.lambdaForm); // Works
      },
      (error) => {
        console.log('ERROR verify : ', error);
        this.verifyError = true;
        this.disableLoader.emit(); // Works
      }
    );
  }

  test(): Observable<any> {
    return Observable.of({ status: 'ok' });
  }

这里是我的函数 verifyKeys :

verifyKeys(body): Observable<any> {
    const result = Observable.fromPromise(
      this.client.externalVerifyPost({}, body, config.additionalParams)
    );

    return this.handleResult.dispatchResponse(result, false);
  }

处理结果服务：

 dispatchResponse(result: Observable<any>, enableSnackbar: boolean = true) {
    return result
      .catch((error) => {
        const exception = this.getException(error);

        this.apiResponse.errorsHandler(exception);
        return Observable.throw(exception);
      })
      .mergeMap((res) => {
        if (enableSnackbar) {
          this.apiResponse.successHandler(res);
        }
        return Observable.of(res.data);
      });
  }

也许它能给你更多的信息。

Answer 1

我发现了我的错误。事实上，当 this.apiGatewayService.verifyKeys(body) 被启动时，加载器被显示出来。

我的 parent HTML 是这样构建的：

<div *ngIf="!loader">
    <child ...></child
</div>

<div *ngIf="loader>
    My loader
</div>

所以当我的加载程序显示时，我的组件从 DOM 中删除并且我的 "submit" 事件发射器被取消订阅。

为了防止这种情况，我使用 angular 属性 [hidden] 而不是 *ngIf。 [隐藏] 就像一个显示：none，而不是从 DOM.

中删除我的 child 组件

在订阅中调用时未发出 EventEmitter

EventEmitter not emitted when called in subscribe

rxjs

eventemitter

typescript

angular