Question

我正在尝试从ionic2 / 3中的标签打开侧边栏菜单（请参阅链接图像）。我无法找到解决方案。 ionic1上已有question但不是2版本

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="page1" tabIcon="someicon"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="page2" tabIcon="someicon"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="page3" tabIcon="someicon"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="page4" tabIcon="someicon"></ion-tab>
</ion-tabs>

我试图用一个函数替换组件名称，以便在我的component.ts中从那里导航但是它不起作用。

  tab1Root = page1;
  tab2Root = page2;
  tab3Root = page3;
  tab4Root = this.functionToToggleSidemenu;
  functionToToggleSidemenu(){
    //here i have placed the navigation code
   }

open sidemenu from tab desired output screenshot

Answer 1

就像您可以在 the docs 中看到的那样：

有时您可能想要调用方法而不是导航到新方法页。您可以使用(ionSelect)事件来调用您的方法选择选项卡时的类。

它是这样的：

<ion-tabs>
  <ion-tab (ionSelect)="openSideMenu()" tabTitle="Sidemenu"></ion-tab>
</ion-tabs>

在组件代码中

import { Component } from '@angular/core';
import { MenuController } from 'ionic-angular';

Component({...})
export class TabsPage {

  // ...

  constructor(public menuCtrl: MenuController) {}

  openSideMenu() {
    this.menuCtrl.open();
  }
}

另一种方法是将menuToggle指令直接添加到选项卡按钮，但AFAIK用于在旧版本的Ionic中导致一些错误（不确定它是否在最新版本中正常工作）老实说）。您可以在此处找到 MenuToggle docs

<ion-tabs>
  <ion-tab menuToggle tabTitle="Sidemenu"></ion-tab>
</ion-tabs>

从标签打开离子侧面菜单

1 个答案: