Ionic 2侧菜单在按下次数后不起作用答案

【问题标题】：Ionic 2 Side menu not working after number of pushesIonic 2侧菜单在按下次数后不起作用
【发布时间】：2017-07-06 09:33:06
【问题描述】：

嗨，当我浏览页面数时，我面临一个问题 ionic 2 side menu 无法正常工作，某些页面设置为 root 并且某些页面被推送到堆栈上。

这是我正在浏览的页面的流程。

导航栈：

RootPage -> navCtrl.push(Page1) -> navCtrl.setRoot(Page2) -> this.navCtrl.push(Page3) ->

this.navCtrl.push(Page4) -> this.navCtrl.push(Page5) -> this.navCtrl.setRoot(Page6) ->

this.navCtrl.setRoot( Page7)

代码：

<ion-menu  class="sproglets_menu"  [content]="content" persistent="true" >


  <!-- (ionOpen)="menuOpened()" (ionClose)="menuClosed()"
   -->
  <ion-content>

    <ion-item no-lines color="transparnt">
      <ion-avatar item-start>
        <img src="assets/images/addimage.png">
      </ion-avatar>
      <h2>Umer</h2>
      <p>Sproglets</p>
    </ion-item>


    <ion-list class="rr-menu" no-lines>

      <button class="search_button" ion-button block item-left round outline color="light" icon-only (click)="Place_order()">
        <ion-icon name='search'></ion-icon>
        Search Jobs
      </button>

      <button ion-item color="transparnt" (click)="Profile()"  detail-none>
        Profile
      </button>

      <button ion-item color="transparnt" (click)="Notifications()"  detail-none>
        Notifications
        <span ion-button clear item-end color="login_btn_color">28</span>
      </button>

      <button ion-item color="transparnt"   detail-none>
        Timesheets
        <span ion-button clear item-end color="login_btn_color">28</span>
      </button>

      <button ion-item color="transparnt" (click)="Payment()"  detail-none>
        Payments
        <span ion-button clear item-end color="login_btn_color">28</span>
      </button>

      <button ion-item color="transparnt" (click)="Setting()"  detail-none>
        Settings
      </button>

      <button ion-item color="transparnt" (click)="Logout()"  detail-none>
        Logout
      </button>

    </ion-list>

  </ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

离子信息：

科尔多瓦 CLI：6.5.0
Ionic 框架版本：3.4.2
Ionic CLI 版本：2.2.1
Ionic 应用程序库版本：2.2.0
Ionic 应用脚本版本：1.3.7
ios-deploy 版本：未安装
ios-sim 版本：未安装
操作系统：Windows 8.1
节点版本：v4.5.0
Xcode 版本：未安装

如果我将 Page7 设置为根，侧边菜单可以正常工作。

请指导我做错了什么。谢谢！

【问题讨论】：

标签： android ios cordova ionic2

【解决方案1】：

基本上，由于模态，我遇到了问题。我打开了模态并导航到模态页面中的下一页，而不是关闭模态然后导航到下一页。以下是解决此问题的正确流程。

1- 从这样的页面打开模式

 presentContactModal() {
   let contactModal = this.modalCtrl.create(ContactUs);
   contactModal.present();
 }

2- 使用视图控制器关闭模式与打开的模式

 constructor(public viewCtrl: ViewController) {

 }
 dismiss() {
   let data = { 'foo': 'bar' };
   this.viewCtrl.dismiss(data);
 }

3- 从第一页导航到下一页，现在它不会产生任何菜单打开问题。

this.navCtrl.push(YourPage);

【讨论】：

【解决方案2】：

为您的菜单添加 ID：

 <ion-menu id="mymenu"  class="sproglets_menu"  [content]="content" persistent="true" >

在page2、page6、page7（设置为rootpage的页面）启用你的菜单

 constructor(public menuCtrl: MenuController){}
 ionViewDidLoad() {
    this.menuCtrl.enable(true, "mymenu"); 
 }

【讨论】：

感谢您的回复。首先请指导我是否需要在存在菜单的 app.html 或我正在设置 rootpage 的文件中提供名称、id？
嗯。它现在的行为是什么？不显示或不更改页面？
没有通过滑动显示，但我已经编写了一个检查菜单是否启用的功能并控制台显示，控制台现在显示启用/禁用但不显示菜单。

【解决方案3】：

如果您仍然面临这个问题，我想我已经找到了这个 cenary 的主要问题。当您从“模态”或“弹出框”推送时会出现问题，因此会出现导航问题。要以正确的方式执行此操作，请从调用 popover 或 modal 的页面执行 push 或 setRoot '。这可以通过“onDidDismiss”函数轻松完成：

   //Page which calls popover:
    popover.create();

    //Page popover: Dismiss existing popover (you may also pass a parameter)
    popover.dismiss(myParameter);

    //Page which calls popover: Veriry if popover was removed
    popover.onDidDismiss(data => {
        if(data == "something")
        {
            //Navigate to new page
            this.nav.push(newPage)
        }
    });

在您的情况下，这些页面之一可能是模态或弹出窗口。所以，试试这个方法，看看会发生什么。

希望对你有帮助！

【讨论】：