时间戳

首页 > 解决方案 > 侧边菜单未在通过模式上的按钮打开的页面上打开

ionic-framework - 侧边菜单未在通过模式上的按钮打开的页面上打开

问题描述

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

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

问题

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

问题

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

自定义模态打字稿代码

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-frameworkionic3

解决方案

这是模态定义工作方式的一部分，“模态是覆盖用户当前页面的内容窗格......模态使用 NavController 在根导航堆栈中呈现自己” 因为当你调用这个.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'});
}

推荐阅读