Angular 如何在ionic 3中的选项卡内创建选项卡

我试图在ionic 3中的一个选项卡中创建三个选项卡，但无法使其工作

，但它似乎是通过早期版本的ionic实现的。我使用的是离子3.10.3

CLI中的IONAL-v打印3.10.3

以下是我的项目中的一些信息

我有一个包含三个选项卡（主页、消息、设置）的主页，我想在消息选项卡内容中创建三个其他选项卡（全部、已读、未读）

以下是我项目的内容

main

/src/pages/main/main.ts 

从'@angular/core'导入{Component}；
从“离子角度”导入{NavController，NavParams}；
从“../home/home”导入{HomePage}；
从“../setting/setting”导入{SettingPage}；
从“../message/message”导入{MessagePage}；
@组成部分({
选择器：“主页面”，
templateUrl:'main.html'
})
导出类主页{
tabHomeRoot：主页；
tabSettingRoot：设置页面；
tabMessageRoot:MessagePage；
构造函数（）{
}
}

如果我没有弄错你的问题，那么我建议你检查一下离子段组件。单击以查看文档

因此，在message.html页面中，您应该添加以下内容：

<ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
  <ion-segment-button value="all">
    All
  </ion-segment-button>
  <ion-segment-button value="read">
    Read
  </ion-segment-button>
  <ion-segment-button value="unread">
    Unread
  </ion-segment-button>
</ion-segment>

最后，只需使用*ngIf根据您为selectedSegment选择的内容来启用或禁用内容

<ion-content>
   <ion-item *ngIf="showAll"></ion-item >
   <ion-item *ngIf="showRead"></ion-item >
   <ion-item *ngIf="showUnread"></ion-item >
</ion-content>

当搜索“离子3标签示例”时，这个问题在谷歌搜索中显示为#3。由于没有答案，我无法想象人们来这里希望举个例子浪费了多少时间

我浪费了很多时间，因为我从你们最初的问题中提取了一些我认为还可以的代码。现在，这对你来说可能无关紧要，但对于谷歌发送到这里的任何人来说，其中一个主要问题是：

您需要添加“=”符号，而不是“：”

export class MessagePage {
tabAllMessageRoot : AllMessagePage;
tabUnreadMessageRoot: UnreadMessagePage;
tabReadMessageRoot: ReadMessagePage;

应该是

export class MessagePage {
tabAllMessageRoot = AllMessagePage;
tabUnreadMessageRoot = UnreadMessagePage;
tabReadMessageRoot = ReadMessagePage;

我浪费了好几个小时的时间，希望这能帮助别人

---

从未回答的问题中获取代码的经验教训

那么您在这里面临什么问题呢？消息选项卡的内容不显示嵌套的选项卡。它应该显示三个选项卡：全部、未读和Read@eyan榴莲，片段确实像标签，可以用于某些情况。在一些需要嵌入整个页面的场景中，例如ajax请求的结果，我认为选项卡更好。我将使用段。但对于那些计划使用段作为解决方案的人，他们可以看看这个github页面。他们使用NGS开关。它更简单。谢谢叶燕榴莲，你的回答节省了我的时间，我也做了同样的事情，但子页面内容没有显示。请参考我的问题。

export class MessagePage {
tabAllMessageRoot = AllMessagePage;
tabUnreadMessageRoot = UnreadMessagePage;
tabReadMessageRoot = ReadMessagePage;