Ionic2 標簽 + 菜單切換

Question

我是 Angular2、Iionic2、NodeJS 的新手……我正在嘗試編寫一些代碼來學習。 在這個“冒險”中，我想做一些類似於帶有 3 個選項卡和一個 menuToggle 的屏幕。 當應用程序運行時，我單擊 menuToggle 按鈕，在第一個選項卡中，它似乎工作正常，但在其余選項卡中，它沒有。 當我單擊按鈕時，在其他兩個選項卡中，menuToggle 出現，但是一旦我嘗試單擊按鈕它就不會消失，它只是執行諸如移動並再次返回並“永遠”保持打開狀態（菜單切換）。

TS 是：

    //import {Page} from 'ionic-angular';
    import {Page, NavController, NavParams} from 'ionic-angular';
    import {ViewController, Platform} from 'ionic-angular';

    import {GitHubService} from '../../services/github.service';

    import {Grupo} from '../../datos/grupo';
    import {DetalleGrupo} from '../detalle-grupo/detalle-grupo';

    @Page({
            templateUrl: 'build/pages/list-grupos/list-gruposxl.html',
            providers: [GitHubService]
    })
    class Grupos {
      isAndroid: boolean = false;

      public grupos: Grupo[];    
      public selectedGrupo: Grupo;

      constructor(platform: Platform,
                private nav: NavController,
                private github: GitHubService) {
        this.isAndroid = platform.is('android');
      }
      onPageWillEnter() {
        //document.getElementById('md-tabs-icon').style.display = "block";
        //document.getElementById('md-only').style.display = "none";
      }

      getGrupos() {
        this.github.getGrupos().then(grupos => this.grupos = grupos);
      }

      ngOnInit() {
        this.getGrupos();
      }

      onSelect(grupo: Grupo) { 
          this.selectedGrupo = grupo; 

      console.log('Hola' + grupo.nombre);
            this.nav.push(DetalleGrupo, { paramGrupo: grupo});
      }    
    }

    @Page({
            templateUrl: 'build/pages/list-grupos/stds_usr.html',
    })

    class Estados_usr {
      isAndroid: boolean = false;

      constructor(platform: Platform,
                private nav: NavController) {
        this.isAndroid = platform.is('android');
      }
      onPageWillEnter() {
        //document.getElementById('md-tabs-icon').style.display = "block";
        //document.getElementById('md-only').style.display = "none";
      }

    }

    //Chats abiertos del usuario
    @Page({
            templateUrl: 'build/pages/list-grupos/opened-chats.html',
            //providers: [GitHubService]
     /* template:
      '<ion-navbar *navbar hideBackButton [attr.danger]="isAndroid ? \'\' : null">' +
        '<ion-title>Últimas conversaciones</ion-title>' +
      '</ion-navbar>' +
      '<ion-content>' +
      'Chats</ion-content>'*/
    })
    class Chats_usr {
      isAndroid: boolean = false;

      constructor(platform: Platform) {
        this.isAndroid = platform.is('android');
      }
      onPageWillEnter() {
        //document.getElementById('md-tabs-icon').style.display = "block";
        //document.getElementById('md-only').style.display = "none";
      }
    }

    @Page({
      template:
      '<ion-tabs class="tabs-icon" [attr.danger]="isAndroid ? \'\' : null">' +
        '<ion-tab tabIcon="contact" [root]="tabOne"></ion-tab>' +
        '<ion-tab tabIcon="calendar" [root]="tabTwo"></ion-tab>' +
        '<ion-tab tabIcon="chatbubbles" [root]="tabThree"></ion-tab>' +
      '</ion-tabs>',
        providers: [GitHubService]
    })
    export class ListGruposPageXL {
      tabOne = Grupos;
      tabTwo = Estados_usr;
      tabThree = Chats_usr;
      isAndroid: boolean = false;


      constructor(platform: Platform,
                private github: GitHubService,
                private nav: NavController) {
        this.isAndroid = platform.is('android');
      }

      onPageWillLeave() {
        //document.getElementById('md-tabs-icon').style.display = "none";
        //document.getElementById('md-only').style.display = "block";
      }

    }

    <!--   ** list-gruposxl.html**
    This is the page where the menut WORKS -->

    <ion-nav id="nav" #content [root]="rootPage"></ion-nav>    
    <ion-menu [content]="content" id="leftMenu2" side="right">
         <ion-toolbar primary>
           <ion-title>Opciones</ion-title>
          </ion-toolbar>
          <ion-content>
            <ion-list>
              <button ion-item>
                Login
              </button>
              <button ion-item>
                Signup
              </button>
            </ion-list>
          </ion-content>
    </ion-menu>

    <ion-navbar *navbar hideBackButton class="show-navbar">
      <ion-title>Mis Grupos</ion-title>
      <ion-buttons start>
        <button>
          <ion-icon name="search"></ion-icon>
        </button>
      </ion-buttons>
      <ion-buttons end>
        <button menuToggle="leftMenu2">
        <ion-icon name="menu"></ion-icon>
        </button>
      </ion-buttons>
    </ion-navbar>

    <ion-content class="card-background-page">   
      <ion-list *ngFor="#grupo of grupos"
            [class.selected]="grupo === selectedGrupo">
       <ion-card>   
        <img src={{grupo.imagen}}/>
        <div class="card-title">{{grupo.nombre}}</div>
        <div class="card-subtitle">{{grupo.descripcion}}</div>
        <button primary clear item-left>
          <ion-icon name="thumbs-up"></ion-icon>
          <div>12 Likes</div>
        </button>
        <button primary clear item-left>
          <ion-icon name="text"></ion-icon>
          <div>4 Comments</div>
        </button>
      </ion-card>
    </ion-list>    
    </ion-content>

<!-- **stds_usr**
In this page I have the problem mentioned before -->

    <ion-nav id="nav2" #content [root]="rootPage"></ion-nav>    
    <ion-menu [content]="content" id="leftMenu" side="right">
         <ion-toolbar primary>
           <ion-title>Opciones</ion-title>
          </ion-toolbar>
          <ion-content>
            <ion-list>
              <button ion-item>
                opcion menu estados 1
              </button>
              <button ion-item>
                 opcion menu estados 2
              </button>
            </ion-list>
          </ion-content>
    </ion-menu>

    <ion-navbar *navbar hideBackButton class="show-navbar">
      <ion-title>todos los estados</ion-title>
      <ion-buttons start>
        <button>
          <ion-icon name="search"></ion-icon>
        </button>
      </ion-buttons>
      <ion-buttons end>
        <button menuToggle="leftMenu">
        <ion-icon name="menu"></ion-icon>
        </button>
      </ion-buttons>
    </ion-navbar>
    <ion-content>
      Página de Estados
    </ion-content>

Answer 1

我正在使用 Ionic 2.0.0-beta.30 並且導航欄中的按鈕與menuToggle屬性一起消失。

這是我的解決方法：

 constructor(private menu: MenuController) { menu.enable(true); } toggle(){ this.menu.toggle(); }

 <button (tap)="toggle()"> <ion-icon name="menu"></ion-icon> </button>