[Must be a Bug?]Switching from Subscribtion to Page not working


#1

Dear Ionic Team,

im pretty sure i tried everything possible to get this working.

I’ve a service which returns an observable. Onec the Observable send an event, it should change the page. I get the log that the event received and “Chaning page since result OK”. But when it hits the setRoot() it doesnt work.

The Annoying thing is, that sometimes its moving after a long time (timeout)?
Here’s a part of my code:

app.ts

  constructor(private menu: MenuController, private app: IonicApp, private platform: Platform, public syncService: SyncService) {

        this.syncService.getSync.subscribe(
            (data: string) => {
                if (data === "RESULT:OK") {
                    console.log("changing page since result OK", data);
                    this.changeRoot();
                }

            }
        )
}

changeRoot() {
let nav = this.app.getComponent(‘nav’);
nav.setRoot(TabsPage);
nav.push(TabsPage);
}

and a part of the sync-service.ts

get getSync() {    return this.asObservable(this.data);   }
asObservable(subject: Subject<any>) {   return new Observable(fn => subject.subscribe(fn));   }


sync() {
    var SyncDataObservable = Observable.fromPromise(this.sqlservice.storage.get("_syncdata"));

    SyncDataObservable.subscribe(
        (syncDate: number) => {
            console.log("observer got syncdata. ITs=" + syncDate);

            let body = { info: { lastSyncDate: (syncDate / 100000) } };
            let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
            let options = new RequestOptions({ headers: headers });

            return this.http.post(this.SYNCDATA.url, "data=" + JSON.stringify(body), options).map(((res: Response) => res.json()))
                .subscribe(httpdata => {
                    this.SYNCDATA.tableToSync.map(
                        (table) => {
                            console.log("syncing table " + table.tableName);
                            httpdata.data[table.tableName].map((k) => {
                                this.sqlservice.insertOrUpdateWithArgs(table.tableName, k, (table.uId != null) ? table.uId : null);
                            });
                        }
                    );

                    this.data.next("RESULT:OK");
                    return this.data.complete();
                });
        }
    )
}

The event changing page since result OK is called. WebDevelopers Console doesnt show any error. even when surrounding with try catch.

Edit: In log i get “finish loading tabs.html” which means that the switching works but hte view is not updated.


#2

Nopaste Code. Easier to read:
https://nopaste.chaoz-irc.net/view/13ce481e


#3

try moving the code to ngOnInit and out of the constructor

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html


#4

same results.
angular2-polyfills.js:126 XHR finished loading: GET “http://localhost:8100/build/pages/tabs/tabs.html”.

But the View is not updating. Still on Splash.html

Edit: Setting nav.setRoot(HomePage) instead of TabsPage works, but then the tabs are gone.

Edit2: setting nav.setRoot(HomePage) in the tabs.ts and nav.setRoot(TabsPage) in app.ts fixed the issue, but this cant be the solution.


#5

Since nav.setRoot(TabsPage) in app.ts and nav.setRoot(HomePage) in tabs calls the constructor of every tab, it wont be a solution. Any other hints solving that issue?


#6

see example app here… https://github.com/aaronksaunders/ionic2-tabs-login-sample

on login

this.nav.setRoot(TabsPage,{})

on logout

// what we are doing here is setting the nav that is holding the tabPages back to
// the login page... the current _nav is a child nav
this._nav.rootNav.setRoot(ModalPage)