模态上的Ionic 3选项卡 [英] Ionic 3 Tabs on Modal

问题描述

我已经在模式上实现了标签。

以下是代码：

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-tab tabIcon =heart[root] =tabNutritabTitle =Nutritional[rootParams] =model>< / ion-tab> 
< ion-tab tabIcon =star[root] =tabIngretabTitle =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

 <离子报头GT; 
< ion-navbar color =header> 
< ion-title> Food Infopedia< / ion-title> 
< ion-buttons end> 
< button ion-button color =lightclear 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（）函数，然后我收到错误运行时错误
未捕获（承诺）：导航堆栈至少需要一个根页

解决方案

 < ion-tab tabIcon =star[root] =tabIngretabTitle =Ingredients[rootParams] =model >< /离子标签> 
  

这将创建一个新的导航堆栈，其中根页为模态页面 ：IngreinfoPage。

当您从IngreinfoPage中解雇时，它将只删除IngreinfoPage，并且堆栈将没有根页面。
如果要关闭标签模式，则必须从TabspagePage中解除，即在TabsPagePage中创建关闭函数，并使用 事件 用于在关闭时调用该函数的API。 / p>

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

解决方案

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

这篇关于模态上的Ionic 3选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！