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

Ionic Framework ionic-v3
1

Hello,

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:

app.component.html

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

This nav above loads the dashboard.

dashboard.component.html

<ion-content>
  <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>
      <section class="column">
        <!-- this is the nav that needs to update and reflect the URL -->
        <ion-nav #detailsPane swipeBackEnabled="false"></ion-nav>
      </section>
    </div>
  </ion-split-pane>
</ion-content>

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

dashboard.component.ts

@ViewChild("detailsPane") splitPane: NavController;

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

Any help will be much appreciated.

2

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…