從選項卡打開離子方菜單

Question

我正在嘗試從ionic2 / 3中的選項卡打開側邊欄菜單（請參閱鏈接的圖像）。 我找不到解決方案。 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
   }

從選項卡打開側面菜單所需的輸出屏幕截圖

Answer 1

就像您可以在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文檔

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