侧边菜单未在通过模式上的按钮打开的页面上打开答案

【问题标题】：Side menu not opening on the page opened via button on modal侧边菜单未在通过模式上的按钮打开的页面上打开
【发布时间】：2018-10-20 11:54:56
【问题描述】：

我正在开发一个带有侧边菜单的 ionic 应用程序。

在我的应用程序中，我添加了一个包含三个按钮的模式。当我单击该模式中的任何按钮时，它会打开一个新页面。在那个新页面上，我有一个标题，其中包含一个用于打开侧面菜单的按钮。

问题

侧边菜单在任何未通过模式上的按钮打开的页面上正常打开，但是当我尝试在通过模式上的按钮打开的页面上打开侧边菜单时，而不是打开该页面上的侧边菜单，它打开当前页面后面的侧边菜单，当我按返回按钮返回上一页时，可以看到在前一页上打开了侧边菜单。

问题

是什么导致了这种行为，我该如何解决？

自定义模态打字稿代码

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { LibraryPageSerice } from './libraryPage.service';


@IonicPage()
@Component({
  selector: 'page-custom-posting-pop-up',
  templateUrl: 'custom-posting-pop-up.html',
})
export class CustomPostingPopUpPage {

  onLibraryPage: boolean;

  constructor(private navCtrl: NavController, private navParams: NavParams,
              private viewCtrl: ViewController,
              private libService: LibraryPageSerice) {}

  ionViewDidLoad() {
    this.onLibraryPage = this.libService.onLibraryPage;
  }

  dismissModal(event) {
    if(event.target.className === 'modal-container') {
      this.viewCtrl.dismiss();
    }
  }

  openCreationpage() {
    this.viewCtrl.dismiss();
    this.navCtrl.push('PostingCreationPage');
  }

  openSupportivePage() {
    this.viewCtrl.dismiss();
    this.navCtrl.push('PostingSupportivePage');
  }

  openLibraryPage() {
    this.viewCtrl.dismiss();
    this.navCtrl.push('MylibraryPage');
  }
}

自定义模态html代码

<div class="modal-container" (click)="dismissModal($event)">

  <div class="modal">
    <p>Posting Method</p>

    <div class="btn-container">
      <button class="creation-btn" (click)="openCreationpage()">My Creation</button>
      <button class="supportive-btn" (click)="openSupportivePage()">Supportive</button>
      <button *ngIf="!onLibraryPage" class="library-btn" (click)="openLibraryPage()">
        My Library
      </button>
    </div>
  </div>

</div>

该方法用于打开模态

posting() {
    const modal = this.modalCtrl.create('CustomPostingPopUpPage');
    modal.present();
}

如果我不使用模式，而是使用警告对话框打开新页面，侧边菜单会正常打开。所以这个问题只有在我使用模态时才会出现。

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

这是定义模式如何工作的一部分，"A Modal is a content pane that goes over the user's current page ... A modal uses the NavController to present itself in the root nav stack" 因此，当您调用 this.navCtrl.push('PageName'); NavController 的这个实例是一个覆盖门户，而不是来自模态的普通 NavController 是一个 Nav。这将导致页面被推送到您的应用根目录（这会导致您看到的结果）。

这里有两个解决方案。

使用 NavParams 将 NavController 的引用传递给您的模态

// home.ts
let modal = this.modalCtrl.create('ModalPage', {'nav': this.navCtrl});

// modal.ts
nav: Nav;
constructor(public navCtrl: NavController,
          public navParams: NavParams,
          public viewCtrl: ViewController) {
this.nav = this.navParams.get('nav');
}
openSupportivePage() {
    this.viewCtrl.dismiss();
    this.nav.push('PostingSupportivePage');
}

或者将你要打开的页面传递给viewCtrl.dismiss()并用onDidDismiss解析

// home.ts
modal.onDidDismiss((open_page) => {
  if (open_page !== undefined && open_page.hasOwnProperty('open_page')) {
    this.navCtrl.push(open_page['open_page']);
  }
});

// modal.ts
openCreationpage() {
    this.viewCtrl.dismiss({'open_page': 'PostingCreationPage'});
}

【讨论】：