Ionic 3 Tabs on Modal | 易学教程

问题

I have implemented tabs on a modal.

Here is the code:

Pagewithmodal.ts

getFoodInfo(food) {
    let foodModal = this.modalCtrl.create('TabspagePage', { Model: food, Api: this.api, Title: 'Food Infopedia' });
    foodModal.onDidDismiss(option => {
      console.log(option);
    });
    foodModal.present();
  }

TabspagePage.html

<ion-tabs>
  <ion-tab tabIcon="heart" [root]="tabNutri" tabTitle="Nutritional" [rootParams]="model"></ion-tab>
  <ion-tab tabIcon="star" [root]="tabIngre" tabTitle="Ingredients" [rootParams]="model"></ion-tab>
</ion-tabs>

TabspagePage.ts

this.tabIngre = 'IngreinfoPage';
    this.tabNutri = 'FoodinfoPage';
    this.model = { 'Api': navParams.data.Api, 'Model': navParams.data.Model };

IngreinfoPage.html

<ion-header>
  <ion-navbar color="header">
    <ion-title>Food Infopedia</ion-title>
    <ion-buttons end>
      <button ion-button color="light" clear icon-only (click)="dismiss()">
        <ion-icon name='close' is-active="true"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

IngreinfoPage.ts

dismiss() {
    this.viewCtrl.dismiss();
  }

When I click the close button, dismiss() function is called, and i'm getting an error Runtime Error Uncaught (in promise): navigation stack needs at least one root page

回答1:

<ion-tab tabIcon="star" [root]="tabIngre" tabTitle="Ingredients" [rootParams]="model"></ion-tab>

This will create a new nav stack with root page as your modal page: IngreinfoPage.

And when you dismiss from IngreinfoPage,it will remove only IngreinfoPage and the stack will have no root page. If you want to dismiss the tabs modal, you will have to dismiss from the TabspagePage i.e. create a dismiss function in TabsPagePage and maybe use Events API to call the function on close.

来源：https://stackoverflow.com/questions/46047598/ionic-3-tabs-on-modal

标签

ionic2

ionic3