Ionic 3 split pane with multiple ion-nav - URL get and set


I have search everywhere, but couldn’t find an answer for this. I know that Ionic 3.5.0 introduced changes for this specific issue, but they are not described anywhere.

I am using ionic-angular@3.9.2

I have a tablet view built with split-pane, and I need to update the browser URL using one of the child ion-nav, and also detect the URL change and update the specific ion-nav accordingly. This is my setup:


<ion-nav #rootNav [root]="rootPage" swipeBackEnabled="false"></ion-nav>

This nav above loads the dashboard.


  <ion-split-pane [when]="isTabletLandscape()">
    <div class="columns">
      <section class="column favourites" main>
        <!-- left column icons that open the details in the right column -->
      <section class="column">
        <!-- this is the nav that needs to update and reflect the URL -->
        <ion-nav #detailsPane swipeBackEnabled="false"></ion-nav>

This is the way I open the details from the left column in the right column:


@ViewChild("detailsPane") splitPane: NavController;

private subscribeOpenCloseViews() {
  this.dashboardService.openDetailView.subscribe((deviceDetails) => {
      if(this.isTabletLandscape()) {
        // this is where I need it to work
      } else {
        // this works by default, because it pushed to the main nav

Any help will be much appreciated.

No one?

Can anyone (maybe from the dev team) explain the 3.5.0 release? It goes like this:

There were major improvements made to navigation in this release of ionic-angular. Specifically, we updated Ionic to support a concept of n root navigation elements, instead of just one. This will enable first-class url support for things split-pane. Before 3.5.0, only one section of the screen could be represented in the URL. With these changes, multiple sections can be represented.

There is no documentation to support that statement…