angular - EventEmitter avges inte när den anropas i subscribe

Jag försöker skicka ett formulär från mitt barnkomponent till dess förälder.

Barn 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:n :

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

Förälder TS :

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

Alla mina utskick till subscribe fungerar inte (console.log i föräldrakomponenten visas inte). Men utanför subscribe fungerar det.

Har du en idé?

REDIGERA

Problemet ligger i raden this.apiGatewayService.verifyKeys(body). Detta anrop fungerar perfekt (korrekt svar), men emit fungerar inte. Däremot fungerar det om jag mockar detta anrop så här:

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' });
  }

Här är min funktion verifyKeys :

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

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

HandleResult-tjänst :

 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);
      });
  }

Kanske ger det dig mer information.

Svar #1

Jag hittade mitt fel. Faktiskt, när this.apiGatewayService.verifyKeys(body) kördes visades en laddningsindikator.

Min överordnade HTML byggdes så här:

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

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

Så när min laddare visades, togs min komponent bort från DOM:en och min "submit"-händelseutgivare avregistrerades.

För att förhindra det använder jag den angular-egenskapen [hidden] istället för *ngIf. [Hidden] fungerar som display: none, och tar inte bort min barnkomponent från DOMen.

Relaterade artiklar