Switch between same page with different parameters

Hi everyone,

I got a question related to navigation between different versions of the same page.

Scenario: List-Page and Details-Page.

If I navigate from List to Detail, everything works as expected. Details page slides in, can go back to List and choose another details page link.

But I do also crosslink details pages. Meaning I can go from Detail 1 to Detail 2 to Detail 3 to Detail 1 without having to go back to list page.

Fo this, i use a function like this:

this.navCtrl.push(DetailsPage, {
article: articleId
});

Works fine, but it creates a “stack” of detail pages. Example: If i switch from Detail 1 to Detail 2, it works fine. If i then navigate to detail 3, it slides in Detail 1 and Detail 2 one after another before I get Detail 3.

Is there a way to “reset” the detail page stack so I only navigate to the destination page with according parameters, but don’t get that “scroll through all previous detail pages” effect?

Best regards
Greg

i believe you can just set the root back to your ListPage

I am stuck at the same problem. Reported it here https://github.com/driftyco/ionic/issues/10134.

Found a way to get at least a partial solution:

this.navCtrl.push(DetailsPage, {
  article: articleId,
}).then(() => {
  const index = this.navCtrl.getActive().index;
  this.navCtrl.remove(index-1);
});

With this script I am at least able to browse within the detail page level via crosslinks without a growing stack of detail pages all scrolled by when navigating to the next detail page version. One can not return to the preview detail view but returns to the list level instead. But this is a better solution than the previous behaviour.

Any ideas on how to build a solution where you can go back and forwards within the details page level without that “slide show effect” of previous pages will be nonetheless really appreciated.

Hi everyone,

just in case someone else got the problem I did describe in my first post:

The reason for that “stack flickering” effekt with all previous details pages scrolling to the final page was caused by a hostlistener. Seems it keeps pages in an “active” state wether they are visible or not.

My solution:

import {Component,Renderer} from '@angular/core'; //Import Renderer from angular core
   
export class Dummy {
    ...    
    globalListenFunc: Function;

    constructor(
        ....,
        renderer:Renderer 
    ){}

    ionViewDidLoad(){	
        //Add listener
        this.globalListenFunc = this.renderer.listenGlobal('document', 'click', (event) => {
        //Do whatever you want on click events
        });
    }

    ionViewDidLeave(){
        this.globalListenFunc(); //remove listener
    }
}    

This solution works fine for me.