javascript - 从选项卡打开 ionic 侧边菜单

Question

我正在尝试从 ionic2/3 中的选项卡打开侧边栏菜单(请参阅链接的图像)。我无法找到解决方案。已经有一个question在 ionic1 上，但不在 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 中看到的那样:

Sometimes you may want to call a method instead of navigating to a new page. You can use the (ionSelect) event to call a method on your class when the tab is selected.

它会是这样的:

<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 指令直接添加到选项卡按钮，但据我所知，它曾经在旧版本的 Ionic 中引起一些错误(不太确定它是否可以在老实说，最新版本)。在这里您可以找到MenuToggle docs

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