Enable View Cache for Ionic 3

@dohoangn wrote:

I am looking for ionic page cache similar to ionic 1 cache-view=true, so everytime I navigate back to the page it will show me the latest state I was in (search results, paging, filter, category, keyword …). However I learned that this feature is not available in Ionic 3.
If I use [navPush] like this

<button ion-button icon-only color="royal" [navPush]="searchProductPage">
	<ion-icon name="search"></ion-icon>
</button>

Everytime I click in search button to go to search page, the state is reset, everything clear
If I use the back button on navigation bar then the state is cached
I have tried popTo(page) but the problem is it will remove all history down to search page from nav stack, if I want to remember the search page, then that’s ok, but If I have another page (for example settings), then it is not possible.

I thought if I get the old page from the nav stack and move it the last index it would work, but in fact it is not working, the popTo also removing history.

public goToPage( page: any ) {
        let hasPage: boolean = false;
        for ( let v of this.navCtrl.getViews() )
        {
            if (page.name === v.component.name) {
                this.navCtrl.popTo( page );
                hasPage = true;
                console.log(".......Pop to page from history")
            }
        }
        if (!hasPage)
            this.navCtrl.push( page );

    }

or

public goToPage( page: any ) {
        let hasPage: boolean = false;
        let oldPage: Component;
        let index: number;
        console.log("......Nav size: " + this.navCtrl.length())
        for ( let i=0; i < this.navCtrl.length(); i++ )
        {
            let v = this.navCtrl.getViews()[i]
            if (page.name === v.component.name) {
                oldPage = v.component;
                hasPage = true;
                index = i;
                console.log(".......Pop to page from history: " + page.name)
            }
        }
        if (!hasPage)
            this.navCtrl.push( page );
        else  {

            this.navCtrl.insert(this.navCtrl.length(), oldPage);
             this.navCtrl.popTo( oldPage );
            console.log(".......insert old page: " + oldPage.name)
        }
    }

I also try ngrx/store however it is became very complex as it has to create reducer for keywork, filters, categories tree, search results, pager (infinitive scrolling), even so it could not get the last location in the scrolling that user have previous view. I have use ngrx/store in save product interface, and it is fine as it only have to save single product ngmodel.

The cache-view in ionic 1 is to convenient for this use case.

Could you please give me a direction?
Thanks!

Posts: 1

Participants: 1

Read full topic