在Ionic 3

Question

TLDR：如何使用一个<ion-tabs>（每个包含至少两个<ion-tab>）实现两个页面？选项卡名称和图标会更改，选项卡内容仅在单击后才会更改。

我有一个问题，我努力寻找解决方案。我看到其他人发布关于这两个的帖子，也没有成功。我希望有人知道解决方案：slight_smile：

首先，我上传了一个github存储库：https://github.com/janhesters/twotabs。

我想在Ionic 3中编写一个应用程序，其中我有两个页面<ion-tabs>，每个页面包含4个<ion-tab> s。我写了两个名为home和hometwo的页面（称为基页）。在每个html中，我声明了ion-tabs。 然后我做了4页（约，两个，联系人，contactstwo;称为tabpages），每个页面中的两个都在每个主页的<ion-tab>中。 接下来，我在第一个主页上创建了一个按钮，将第二个主页推送到navCtrl。 （我没有将按钮放在其中一个标签页上，因为这样页面就会被推到该导航栏上，因为每个标签页似乎都有自己的导航{{3} }）。

预期行为： 第二个基页被推入堆栈并显示新选项卡及其各自的名称图标和内容。

观察到的行为： 第二个基页被压入堆栈并显示新选项卡及其各自的名称和图标。 BUT 页面的内容是第一个基页的相应选项卡之一。只有在单击每个新选项卡后，内容才会更改。

有谁知道如何解决这个问题？ （我的一个不太好的解决方案想法，我无法弄清楚如何做，涉及＆＃34;鬼点击＆＃34;所有标签一旦页面加载...所以是的： （）

任何帮助将不胜感激！谢谢！

Answer 1

我没有检查您的源代码，但我认为这可能有用。你能快点试试root导航吗？

import { App } from 'ionic-angular';

...

constructor(app: App) { ... }

然后使用以下代码而不是navCtrl.push（）

this.app.getRootNav().push(HomeTwoPage)

Answer 2

我发现的唯一解决方案是在tabs.html中使用conditionnal ion-tabs：

<ion-tabs id="locTabs" *ngIf="user && user.typeProfil == 'loc'">
    <ion-tab [root]="annonce" tabTitle="Annonces" tabIcon="home"></ion-tab>
    <ion-tab [root]="chat" tabTitle="Message" tabIcon="chatbubbles" [tabBadge]="nbUnread"></ion-tab>
    <ion-tab [root]="agenda" tabTitle="Agenda" tabIcon="calendar"></ion-tab>
    <ion-tab [root]="docs" tabTitle="Documents" tabIcon="document"></ion-tab>
    <ion-tab [root]="userForm" tabTitle="Profil" tabIcon="person"></ion-tab>
</ion-tabs>

<ion-tabs id="proTabs" *ngIf="user && user.typeProfil != 'loc'">
    <ion-tab [root]="annoncePro" tabTitle="Annonces" tabIcon="home"></ion-tab>  
    <ion-tab [root]="chat" tabTitle="Message" tabIcon="chatbubbles" [tabBadge]="nbUnread"></ion-tab>
    <ion-tab [root]="agenda" tabTitle="Agenda" tabIcon="calendar"></ion-tab>
    <ion-tab [root]="docsPro" tabTitle="Documents" tabIcon="document"></ion-tab>
    <ion-tab [root]="userForm" tabTitle="Profil" tabIcon="person"></ion-tab>
</ion-tabs>

Answer 3

在Ionic论坛上提供了答案（sorta） https://forum.ionicframework.com/t/99-cant-solve-this-creating-two-tab-pages-in-ionic-ion-tabs/118477/12

享受：）