Ionic 2: publish multiple events on Modal dismiss sometimes doesn't work

Question

I've got a modal window that when you click 'Add', it does its thing, dismisses, and then when the promise is resolved, publishes some events that tell relevant components to update:

this._viewControl.dismiss().then(() => 
    this._events.publish('update_myJobsPage', null);
    this._events.publish('update_assessmentsPage', null);
    this._events.publish('update_buildingPage', null);        
});

Problem is, sometimes it works and they update their views, sometimes not. The modal always dismisses and the events fire though.

Am I doing something fundamentally wrong here?

Thanks.

Just a suggestion, could you not just have one event `update_pages` and have each page handle the same event? — Will.Harris, Jul 06 '16 at 14:24
I could do, but I prefer to have each page subscribe to its own event so I can more granularly control what pages update and when. — Dave, Jul 06 '16 at 14:26
Ok. I think what LeRoy suggests with using `onDismiss()` is at least the right way to trigger the events, whether that will fix your issue or not though I don't know — Will.Harris, Jul 06 '16 at 14:28

score 2 · Answer 1 · edited May 23 '17 at 12:09

Problem is, sometimes it works and they update their views, sometimes not.

As you can read in this answer, Application state change is caused by three things:

1) Events - User events like click, change, input, submit, …

2) XMLHttpRequests - E.g. when fetching data from a remote service Timers -

3) setTimeout(),setInterval(), because JavaScript

It turns out that these are the only cases when Angular is actually interested in updating the view.

So if you want to update other things outside Angular way, you will have to let Angular know that something has changed and needs to we aware of updating things. You can do this by first importing ngZone like this:

import { ..., NgZone } from '@angular/core';

Declaring it in your constructor like this:

constructor(..., private ngZone: NgZone ) { //... }

And then surrounding your code inside a zone

this._viewControl.dismiss().then(() => 

  this.ngZone.run(() => {
    // Execute here what you want and Angular will update the view for you.
    // ...    
    this._events.publish('update_myJobsPage', null);
    this._events.publish('update_assessmentsPage', null);
    this._events.publish('update_buildingPage', null);

  });     
});

score 0 · Answer 2 · answered Jul 06 '16 at 14:23

0

Have you tried onDismiss ?

 this._viewControl.onDismiss(() => {
    this._events.publish('update_myJobsPage', null);
    this._events.publish('update_assessmentsPage', null);
    this._events.publish('update_buildingPage', null); 
   });

answered Jul 06 '16 at 14:23

LeRoy

4,189
2
35
46

Thanks, but that's not the right solution. Using dismiss().then(...) is the stated way to do it from the Ionic 2 docs I've found, and it works everywhere else in my app! – Dave Jul 06 '16 at 14:42

score 0 · Answer 3 · answered Jul 06 '16 at 14:44

0

So, it turns out, if I empty out my collection when I'm refreshing, so..

e.g

updatePage() {
    this.myCollection = [];
    this.someService.getItems().then(items => {
        this.myCollection = items;
    });
}

then the page always shows the update. So I'm going to put this one down to a timing/change detection bug in Angular 2 and move on!

answered Jul 06 '16 at 14:44

Dave

5,283
7
44
66

Please read my answer. The page shows the update because an application state change is caused by XMLHttpRequests (when calling the `someService` service). But you could improve that by using _NgZone_. – sebaferreras Jul 06 '16 at 17:18
1

Actually it's not, because my service is fetching from local storage database, not an external http service. – Dave Jul 06 '16 at 17:55
Oh I see... maybe the `then()` has something to do? Will do a few tests later today. Thanks @Dave for letting me know that by the way. – sebaferreras Jul 06 '16 at 18:22
No problem, thanks for your in depth explanation. The key to my issue I think is that sometimes it worked, sometimes not, which means it's not an angular 2 change detection issue, rather a timing issue with promises, transitions (modal pages dismissing animation) and the Ionic 2 framework. – Dave Jul 06 '16 at 19:20
1

turns out this didn't fully work. Going with NgZone. Thanks. – Dave Jul 08 '16 at 14:00

Ionic 2: publish multiple events on Modal dismiss sometimes doesn't work

3 Answers3