模态上的离子 3 选项卡

我已经在模态上实现了选项卡。

这是代码：

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

当我点击关闭按钮时，dismiss() 函数被调用，我收到一个错误 Runtime Error Uncaught (in promise): navigation stack needs at least one root page