Question

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

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

问题

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

问题

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

自定义模式打字稿代码

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();
}

如果我不使用模式，而是使用警报对话框来打开新页面，则侧面菜单会正常打开。因此，仅当我使用模态时才会出现此问题。

Answer 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'});
}

在通过模式

1 个答案: