Как разместить вкладки внутри Popover

Question

У меня есть требование, когда приложение имеет вид вкладки. На четвертой вкладке есть popover, и этот popover содержит более 3 меню, которые должны действовать как вкладка, что означает, что она должна открываться, как и другие 3 вкладки.

Я пытался, но страница не отображается, так как она не устанавливает всплывающую страницу в качестве корневой страницы в представлении вкладок.

tabs.html

<ion-tabs #myTab>
  <ion-tab [root]="tab1Root" tabIcon="theme-business"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="theme-table"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="theme-like"></ion-tab>  
  <ion-tab (ionSelect)="presentPopover($event)" tabIcon="ios-apps-outline"></ion-tab>    
</ion-tabs>

tabs.ts

 presentPopover(event) {
    let popover = this.popoverCtrl.create(TabPopoverPage, {});
    popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
  }

tabPopover.html

<ion-content padding>
  <ion-list>
    <button ion-item (click)="openPage('SalonDetailsPage')">
      <ion-icon name="theme-profile" item-left></ion-icon>
      Profile Page
    </button>
    <button ion-item (click)="openPage('SalesReportPage')">
      <ion-icon name="theme-wallet" item-left></ion-icon>
      Sales Report
    </button>
    <button ion-item (click)="openPage('SettingsPage')">
      <ion-icon name="theme-setting" item-left></ion-icon>
      Setting
    </button>
  </ion-list>
</ion-content>

tabPopover.ts

openPage(pageName: any) {
    // this.navCtrl.setRoot(pageName);    
    this.navCtrl.push(pageName);
  }

Помощь будет оценена!

Answer 1

Обратите внимание, что, хотя эта реализация не самая лучшая и, возможно, существует еще дюжина других способов решения этой проблемы, но это был самый простой способ. Вы можете найти рабочий пример здесь: https://stackblitz.com/edit/ionic-v3-custom-tabs

возможно, есть программный способ добавить новый элемент ion-tab, но я не смог найти его на ионных документах, но вот мой вариант реализации, основанный на этом вопросе

Шаг 1:

в настоящее время у нас есть 4 вкладки, мы добавляем дополнительные элементы вкладки, которые нам нужны

<ion-tab [root]="tab4Root" show= "false"  tabIcon="person"></ion-tab>
<ion-tab [root]="tab5Root" show= "false" tabIcon="cash"></ion-tab>
<ion-tab [root]="tab6Root" show= "false" tabIcon="settings"></ion-tab> 

ПРИМЕЧАНИЕ атрибут show показывает: в соответствии с ionic docs скрывает элемент tab. https://ionicframework.com/docs/api/components/tabs/Tab/ это создает элементы ion-tab, но скрывает их.

шаг 2:

нам нужна ссылка на элемент ion-tabs, который уже был определен с <ion-tabs #myTab>

страница: tabs.ts

// мы получаем вкладки ion, используя ссылку на шаблон, а затем присваиваем ее локальной переменной tabRef

@ViewChild('myTab') tabRef: Tabs;

presentPopover(event) {
    let popover = this.popoverCtrl.create(PopoverPage, {navpage: this}); // note the navpage: this
    popover.present({ ev: { target: event.btn._elementRef.nativeElement } });

  }

нам нужен способ ссылки на этот компонент (TabsPage), поэтому мы передаем его в виде параметров навигации https://ionicframework.com/docs/api/components/popover/PopoverController/ https://ionicframework.com/docs/api/navigation/NavParams/

шаг 3:

страница: popover.html

<button ion-item (click)="openPage(4)">
  <ion-icon name="person" item-left></ion-icon>
  Profile Page
</button>
<button ion-item (click)="openPage(5)">
  <ion-icon name="cash" item-left></ion-icon>
  Sales Report
</button>
<button ion-item (click)="openPage(6)">
  <ion-icon name="settings" item-left></ion-icon>
  Setting
</button>

// каждый номер представляет собой индекс вкладки страницы, которую мы хотим просмотреть: https://ionicframework.com/docs/api/components/tabs/Tabs/

страница: PopoverPage

// the tabs page ref
tabsPageRef: TabsPage;

constructor(
    public navCtrl: NavController, 
    public navParams: NavParams
    ) {
    // recall the navpage: this from the TabsPage?
      this.tabsPageRef = this.navParams.get('navpage');
  }


  openPage(pageName: any) {
    // here, we are using the reference of the TabsPage to access the local variable tabref
    this.tabsPageRef.tabRef.select(pageName)
  }