Preload page in Ionic 2

Is it possible to do the equivalent of the following without navigating to the page:

nav.push (SomePage)

I want the page to initialize and objects to load, but not to navigate to it

But why? what would be the reason to do this?

I have a chat app that uses FireBase list of items. If another user adds a message to the list, I need the Chat header to update. The list of Chat items do not update, unless the messages for that chat have already been initialized.

So from the Chatpage, I want initialize the MessagePage for all uninitialzed chats.

ChatPage has many Messages

i think instead of initializing all chats if you are not needing them, just update the number of messages?

Just an API / Firebase call within a service?

The problem is the object is contained in the page.

messages.ts

this.firelist = this.dataService.findMessages(this.chatItem).map(items => {

I need this fireList to initialize.

        ionViewWillEnter() {     
        yourFunction();
       }

i hope this helps , call this outside the constructor

1 Like

Thanks, but this is not what I am looking for. I want to load one page from another.

i.e.

ChatPage -> MessagePage

I want to initialize MessagePage, from ChatPage without having to actually navigate to the MessagePage.

The following works, but is a bit clumsy:

chatPage.ts

this.nav.push(MessagePage);

messagePage.ts

this.nav.pop();

it’s like u want to show the message count at the chat page ?? am i right ?

Almost, I want to update the Chat header, with the last message.

I may have a list of chats, and the user sends messages, I want those chat headers to be updated with the messages. Just like WhatsApp’s functionality.

I am going to see if I can try achieve this using events

Maybe using a delegation with an observable?

1 Like

I am using an Observable.

findMessages(chatItem: any): Observable<any[]> {
    return Observable.create((observer) => {
        this.firebaseDataService.findMessages(chatItem).subscribe(firebaseItems => {
            this.localDataService.findMessages(chatItem).then((localItems: any[]) => {
                let mergedItems: any[] = this.arrayUnique(firebaseItems.concat(localItems));
                mergedItems.sort((a, b) => {
                    return parseFloat(a.negativtimestamp) - parseFloat(b.negativtimestamp);
                });
                // if (this.me && mergedItems && mergedItems[0] && this.me.uid === mergedItems[0].memberId2) {
                //     this.updateChatWithMessage(chatItem, mergedItems[0], false);
                // }
                observer.next(mergedItems);
            });
        });
    });
}

But as you can see, I commented out the part where it does the update of that chat header with the last message. This was causing an infinite loop, because the update caused the Observable to fire the update again.

Not sure about your solution but here the pseudo code I use, maybe it will give you a hint

Pseudo code:

In my service

private mySubject:Subject<MyObject> = new Subject();
myNotifier:Observable<MyObject> = this.mySubject.asObservable();

// To emit
this.myNotifier.next(myValue);

In my page navbar in the constructor:

this.myService.myNotifier.subscribe((myObject) => (// Do stuffs));

I just tested my example above again, and it works with no infinite loop. I must have had some other code somewhere that was being triggered causing the infinite loop. Now that’s been fixed, it works.

Thanks, for suggesting the Observable, because that’s what works. This also ties in well with Firebase, because that’s what it returns.

2 Likes

well done, congrats!

1 Like