Back Button when Switching from One Set of Tabs to Another

Ionic Framework ionic-v3
1

I have two tabs pages (with four tabs each) in an Ionic 2 project. When I navigate between them, the back button breaks. The app begins on TabsPage, which has four child pages:

tab1Root: any = MapResultsPage;
tab2Root: any = ListResultsPage;
tab3Root: any = AboutPage;
tab4Root: any = LoginPage;

MapResultsPage and ListResultsPage both link to DetailTabsPage using getRootNav().

viewMapDetails(mapData): void {
  const root = this._app.getRootNav();
  root.push(DetailTabsPage, {mapData: mapData});
}

This loads the page with the correct data, but it disables the back button. Likewise the menuToggle feature in the ion-navbar component seems broken (the icon is always the 3-line “hamburger,” never the back arrow.

Am I doing something wrong with this kind of navigation?

Here’s a repository that shows what I’m doing.

2

This is also messing up a component used in one of the children of TabsPage. The component’s constructor is called every time the page is viewed (rather than only once). That, in turn, is breaking the Leaflet library, by trying to initialize a map twice.