Enable View Cache for Ionic

Ionic Framework ionic-v3
1

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!

2

You can just buiid a provider that keeps a global state, sort of a redux-lite. You don’t need full ngrx. The advantages of ngrx are: immutability, memoized selectors, and the ability to program side effects. If you don’t need those, just create a simple provider, and read the provider’s data from any page you want.

3

I think it will be hard and messy to keep track of all object in the page, like results, scrolling position, filters, page, query keyword and also need to sync from page to provider, then provider to page. Getting the old page from somewhere in nav stack to put it in the last index position will be better, instead of pop to the page and remove all pages after this page, we can move the page to the last position.

4

Is there some reason NavController.insert does not work for this? You seem to be describing something that is already covered by the API.

5

I have tried in my method public goToPage

this.navCtrl.insert(this.navCtrl.length(), oldPage);

but did not seem to work

6

I can’t do anything with this. insert and insertPages perform what you asked for in your answer to me.

7

the problem is moving a page from middle of stack to last index by insert only get the navigation flow to the page, but the state of the page is cleared out, but popTo method keep the state of the page. Could the NavController team provider a method like movePage(fromIndex, toIndex) and REMEMBER THE STATE OF THE PAGE?

8

Hi, any news on this feature?

I need it too, is very boring lose the page state everytime the user change page.