【问题标题】:Navigating back to root - menu toggle button broken导航回根目录 - 菜单切换按钮损坏
【发布时间】:2016-12-25 08:05:27
【问题描述】:

我正在使用 Ionic 2。

第 1 页 (SearchPage) -> 弹出框 -> 第 2 页 (MapPage) -> 第 1 页 (SearchPage)(menuToggle 不起作用)

我有一个根页面(SearchPage):

html

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

ts

  presentPopover(event: Event): void {
    let popover: Popover = this.popoverController.create(SearchPopOverPage, {
      ev: event,
      employeeModel: this.employeeModel
    });
    popover.present();
  }

弹窗

  presentFilterMap(event: Event) {
    this.viewCtrl.dismiss().then(() => {
      this.nav.push(MapPage, {
        ev: event,
        employeeModel: this.employeeModel,
        fromSearch: true
      })
    });
  }

但是当我尝试返回根页面(带参数)时,它会显示菜单切换按钮(3行),但是当我单击它时它不起作用(即什么也不做,它应该显示侧面菜单)。

ts(MapPage)文件返回根目录:

  this.nav.insert(0, SearchPage, {
    employeeModel: this.employeeModel
  });

如果我尝试popToRoot(options),它会起作用并且菜单切换按钮起作用。但是,它不会使用新参数重新加载页面。

请问我应该如何使用参数导航回根页面?

谢谢

更新: 我尝试了以下方法,但它并没有回到根目录:

  let options = {
    employeeModel: this.employeeModel
  };
  this.nav.popToRoot(options);

更新: 我也尝试将弹出框调用更改为下一页,但收效甚微。现在 MapPage 上的后退按钮可以使用,但是当我转到根页面时,menuToggle 仍然没有响应点击。

  presentFilterMap(event: Event) {
    this.nav.push(MapPage, {
      employeeModel: this.employeeModel,
      fromSearch: true
    }).then(() => {
      this.viewCtrl.dismiss();
    });
  }

如果我不关闭弹出框,

    this.nav.push(MapPage, {
      employeeModel: this.employeeModel,
      fromSearch: true
    });

然后,当我使用 MapPage 上的后退按钮返回根目录时,弹出框仍然存在,并且 menuToggle 按预期工作。但是,如果我宁愿导航回根页面(我需要这样做),那么弹出框不存在并且 menuToggle 没有响应。

这意味着问题与弹出框有关。

【问题讨论】:

  • 我认为我的问题与弹出框有关,因为 Page 2 (MapPage) menuToggle 也不起作用。因此,一旦单击弹出窗口上的按钮,我认为它会干扰导航。只是猜测。
  • 我查看了我的 Ionic 2 代码。尝试完全按照他们预先安装的菜单进行操作,更改根目录以避免返回箭头。 this.nav.setRoot(SearchPage);
  • 盲人先知,很抱歉花了很长时间才回复。 this.nav.setRoot(SearchPage); 告诉我SearchPage,但同样的问题,menuToggle 按钮不起作用。这让我觉得问题是因为我在两者之间有一个popover。我认为这是以某种方式“破坏”它。

标签: javascript angularjs typescript ionic-framework ionic2


【解决方案1】:

当您从地图页面导航回搜索页面时

使用:

  this.navCtrl.push(SearchPage, { employeeModel: this.employeeModel });

【讨论】:

    【解决方案2】:
     import { App } from 'ionic-angular';
    
    constuctor(public app: App) {};
    
    pushSignupPage() {
        this.viewCtrl.dismiss().then(() => {
          this.app.getRootNav().push(SignupPage);
        });
      }
    

    这对我有用。祝你好运

    【讨论】:

    • 虽然此代码可能会回答问题,但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。请阅读此how-to-answer 以提供高质量的答案。
    • 像魅力一样工作;)
    【解决方案3】:

    解决方案:使用事件处理参数并弹出到root

     let data = {
        eModel: this.eModel
      };
    events.publish('employee:update', data);
    this.nav.popToRoot();
    

    在您的 SearchPage 构造函数中:

    events.subscribe('employee:update', (data) => {
    //do whatever you need to do with your data:
      let EModel = data[0].eModel;
    });
    

    【讨论】:

    • 既然是传递数据,那么创建一个dataService,并使用observables订阅会不会更好?结果是一样的,但我想使用服务是比使用事件更好的处理应用程序数据的方法。如果您愿意,我可以添加更多详细信息的答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-10-07
    • 2021-08-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多