无法从对话框访问Ionic / Angular中“ this”的父级引用

Question

I have an Ionic page (I'll call it Page) that has a button that opens a dialog. The dialog is defined as a separate page in separate files(.ts, .module.ts, .scss, .html).

In the dialog there is a button that when clicked performs an AJAX request and on success I need to change data in the parent Ionic page. And this just doesn't seem to work.

This is how I open the dialog in the Page and pass the callback function to dialog:

openReset(){
    const resetModal : Modal = this.modal.create(DeploymentConfigurationResetPage, { car: this.car, callback: (car) => this.hardResetCallback(car) });
    resetModal.present();
  }

This is the callback function defined in the Page:

hardResetCallback(car:Car){
    this.car=car;
    this.ref.detectChanges();
  }

In the .ts file of the dialog I get the car and callback like this through nav params:

  ionViewDidLoad() {
    this.deployment=this.navParams.get('car');
    this.callback=this.navParams.get('callback');
  }

And in the dialog I have a button that triggers this function which is supposed to get the reset car from the server and replace the current car with the one that's returned by the server. As you can see - service calls success method calls the callback:

hardReset(){
      this.loading.show();
    this.serviceX.resetCarConfiguration(this.car).subscribe(
      (response: any) => {
        if (response) {
          this.message.showToast({ message: this.carReset });
        }
        this.callback(response);
        this.closeModal();
      },
      (error: Error) => {
        console.error(error);
        this.loading.hide();
        this.message.showToast({
          message: this.carResetError
        });
      },
      () => {
        this.loading.hide();
      }
    );
  } 

But the car in the Page doesn't change. I even use the ChangeDetectorRef (this.ref) in the callback function, but it just doesn't change.

When I console.log "this" in the callback function, it seems like it shows the context for the right page, it just somehow seems it's a different instance of the page?

Answer 1

The problem here was not the dialog, but that I was expecting the view to change when this.car wasn't bound to view... There was a variable called

 this.carSection = this.car.sections[iSectionIndex] 

that was bound to view.

So if anyone has this problem... Check your bindings carefully.