Как можно вытолкнуть все вкладки стека на смену вкладки в ионном? - PullRequest
0 голосов
/ 07 октября 2018

Код моей текущей вкладки складывает все страницы один на один для отдельных вкладок.Поэтому, когда я меняю вкладки, отображаются предыдущие сложенные страницы, я хочу установить все вкладки в корень, когда меняю вкладку.Вот мой текущий код

export class TabsPage {

  tab1Root = HomePage;
  tab2Root = SearchPage;
  tab3Root = QueuesPage;
  tab4Root = FavoritesPage;
  tab5Root = SettingsPage;

  constructor() {

  }
}
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Search" tabIcon="search"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Queues" tabIcon="people"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Favorites" tabIcon="star"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="Settings" tabIcon="cog"></ion-tab>
</ion-tabs>

1 Ответ

0 голосов
/ 08 октября 2018

Мне удалось добиться того, что вы ищете, получив ссылку на компонент вкладок, а затем, получив доступ к NavController с предыдущей вкладки, вызвать метод popToRoot():

<!-- #myTabs allow us to get a reference of the tabs -->
<!-- (ionChange) allow us to run our method every time the selected tab is changed -->
<ion-tabs #myTabs (ionChange)="onTabsChange()">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

А потом:

// Angular
import { Component, ViewChild } from '@angular/core';

// Pages
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

// Tabs
import { Tabs } from 'ionic-angular';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  @ViewChild('myTabs') tabRef: Tabs;

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  onTabsChange() {
    // Get the previous tab if any
    const previousTab = this.tabRef.previousTab(false);

    if(previousTab) {
      try {
        // Get the navCtrl and pop to the root page
        previousTab.getViews()[0].getNav().popToRoot();
      } catch(exception) {
        // Oops...
        console.error(exception);
      }
    }
  }
}

Проект Stackblitz

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...