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

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

введите здесь описание изображения

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

вкладки.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>

вкладки.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);
  }

Помощь приветствуется!


ionic-framework ionic3 angular6 ionic-tabs ionic-popover
person Kunal Kakkad    schedule 31.12.2018    source источник
comment
Здравствуйте, вам нужно обновить свой вопрос, указав, что ваш код показывает, что вы реализовали. Я предполагаю, что вы установили свои маршруты?   -  person Triple0t    schedule 31.12.2018
comment
@SeunBincom: Пожалуйста, проверьте обновленный пост.   -  person Kunal Kakkad    schedule 01.01.2019
comment
это, кажется, приложение ionic 3. вы создаете приложение ionic 3 или ionic 4?   -  person Triple0t    schedule 01.01.2019
comment
У этого подхода есть ограничение, так как событие ionSelect генерируется только тогда, когда неактивная вкладка становится активной, однако в вашем случае вы хотели бы показывать всплывающее окно, даже когда последняя вкладка уже выбрана.   -  person rmalviya    schedule 01.01.2019
comment
@SeunBincom: это приложение ionic v4.   -  person Kunal Kakkad    schedule 02.01.2019
comment
@rmalviya: Не могли бы вы помочь предложить какой-нибудь подход для достижения того же? Любая ссылка или plnkr или объяснение были бы очень благодарны.   -  person Kunal Kakkad    schedule 02.01.2019
comment
@KunalKakkad, вы собираетесь неправильно настроить навигацию, сэр. навигация в ionic 3 и ionic 4 совершенно разные. попробуйте прочитать эту статью joshmorony .com/   -  person Triple0t    schedule 02.01.2019
comment
@SeunBincom: О, мой плохой. Я не был в курсе того же. Я использую ionic v3. Не могли бы вы помочь мне с этим, чтобы решить мою проблему.   -  person Kunal Kakkad    schedule 02.01.2019
comment
@KunalKakkad без проблем. Вскоре я расскажу, как реализовать это в версии 3.   -  person Triple0t    schedule 02.01.2019
comment
@SeunBincom: Конечно. Спасибо за это, чувак. Ждем того же.   -  person Kunal Kakkad    schedule 02.01.2019
comment
@KunalKakkad Эй, вот рабочая реализация того, что тебе нужно. это не лучшее, но это работает. stackblitz.com/edit/ionic-v3- пользовательские вкладки?file=pages/settings/   -  person Triple0t    schedule 02.01.2019
comment
Я думаю, это сработает. Поскольку он работает идеально в соответствии с ожиданиями, он будет реализован в реальном времени и сообщит вам. И еще раз большое спасибо за него. Вы спасли мой день.   -  person Kunal Kakkad    schedule 02.01.2019
comment
@SeunBincom Также, пожалуйста, ответьте на приведенный выше URL-адрес как часть ответа на сообщение, а не как комментарий, чтобы я мог пометить его как работающий, чтобы он был полезен для других в будущем.   -  person Kunal Kakkad    schedule 02.01.2019
comment
@KunalKakkad хорошо сделано. Надеюсь, что это работает для вас   -  person Triple0t    schedule 02.01.2019
comment
Давайте продолжим обсуждение в чате.   -  person Kunal Kakkad    schedule 03.01.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

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

Шаг 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 show: в соответствии с ionic docs скрывает элемент вкладки. https://ionicframework.com/docs/api/components/tabs/Tab/#input-properties создает элементы ion-tab, но скрывает их.

шаг 2:

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

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

// мы получаем ion-tabs, используя ссылку на шаблон, а затем присваиваем ее локальной переменной 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/#create https://ionicframework.com/docs/api/navigation/NavParams/#get

шаг 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/#selecting-a-tab

страница: 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)
  }
person Triple0t    schedule 02.01.2019