代码之家 › 专栏 › 技术社区 › Kunal Kakkad

如何在Popover中放置选项卡

ionic-popover ionic-tabs angular6 ionic3 ionic-framework

Kunal Kakkad · 技术社区 · 7 年前

在应用程序具有选项卡视图的地方,我有一个要求。第四个选项卡有弹出窗口,而弹出窗口包含3个以上的菜单,这些菜单应作为一个选项卡,这意味着它应该像其他3个选项卡一样打开。

我已经尝试过了,但是页面没有显示,因为它没有将弹出页面设置为选项卡视图中的根页面。

标签页

<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 } });
  }

TabPopRo.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>

TabPopRoopts

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

我们将感谢您的帮助!

1 回复 | 直到 7 年前

Triple0t 7 年前

请注意,虽然这个实现不是最好的,而且可能有许多其他方法来解决这个问题,但这是最简单的。您可以在这里找到一个工作示例: https://stackblitz.com/edit/ionic-v3-custom-tabs

可能有一种方法可以通过编程方式添加一个新的Ion选项卡项,但我在Ion文档上找不到它,但下面是我对基于此问题的实现的看法

步骤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>

注意显示属性 显示:根据离子文档隐藏tab元素。 https://ionicframework.com/docs/api/components/tabs/Tab/#input-properties 这将创建离子选项卡元素,但隐藏它们。

步骤2:

我们需要一个对离子标签元素的引用,这个元素已经用 <ion-tabs #myTab>

页:表

//我们使用模板引用获取离子选项卡,然后将其分配给局部变量 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

页码:PopOverage

// 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)
  }