首页 文章

在Ionic 3的一个应用程序中实现两个标签页（每个标签页包含一个离子标签）

提问于
浏览 次
0

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），每个页面的每个主页中有两个位于每个主页的_1028794中 . 接下来，我在第一个主页上创建了一个按钮，将第二个主页推送到navCtrl . （我没有被推到导航器上，因为每个标签页似乎都有自己的导航https://ionicframework.com/docs/api/components/tabs/Tab/） .

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

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

有谁知道如何解决这一问题？ （我的一个不太好的解决方案想法，我无法弄清楚怎么做，一旦页面加载就涉及“鬼点击”所有标签...所以是的:(）

任何帮助将非常感激！谢谢！

ionic-framework ionic2 tabs ionic3

3 回答

  • 0

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

    import { App } from 'ionic-angular';

    ...

    constructor(app: App) { ... }

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

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

    回复于
  • 0

    我发现的唯一解决方案是在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>
    回复于
  • 0
    回复于

相关问题