typescript 如何在离子 3 的选项卡内创建选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46332299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create tabs inside a tab in ionic 3
提问by Jean Jacques
I am trying to create three tabs inside a tab in ionic 3 but, i can't get it working.
我试图在 ionic 3 的一个选项卡内创建三个选项卡，但是我无法让它工作。
Here is an example of what i trying to do, but it seems to have been achieved with an earlier version of ionic. i am using ionic 3.10.3
这是我尝试做的一个例子，但它似乎是用早期版本的 ionic 实现的。我正在使用离子 3.10.3
ionic -v from the CLI prints 3.10.3
来自 CLI 的 ionic -v 打印 3.10.3
Here are some information from my project.
以下是我的项目中的一些信息。
I have a main page with three tabs (Home, Message, Setting) and i want to create three other tabs(All, Read, Unread) inside the Message tab content.
我有一个包含三个选项卡（主页、消息、设置）的主页，我想在消息选项卡内容中创建其他三个选项卡（全部、已读、未读）。
Here are the content of my projet
这是我的项目的内容
main
主要的
/src/pages/main/main.ts
import { Component } from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
import { HomePage } from '../home/home';
import { SettingPage } from '../setting/setting';
import { MessagePage } from '../message/message';
@Component({
selector: 'page-main',
templateUrl: 'main.html'
})
export class MainPage {
tabHomeRoot : HomePage;
tabSettingRoot: SettingPage;
tabMessageRoot: MessagePage;
constructor(){
}
}/src/pages/main/main.html
<ion-tabs>
<ion-tab [root]="tabHomeRoot" tabTitle="Home"></ion-tab>
<ion-tab [root]="tabMessageRoot" tabTitle="Message" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tabSettingRoot" tabTitle="Setting" tabIcon="gear"></ion-tab>
</ion-tabs>The content of the other tabs are basic, so i am only going to put the content of The message tab
其他标签的内容是基本的，所以我只放消息标签的内容
message
信息
/src/pages/message/message.ts
import { Component } from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
import { AllMessagePage } from '../all-message/all-message';
import { ReadMessagePage } from '../read-message/read-message';
import { UnreadMessagePage } from '../unread-messag/unread-message';
@Component({
selector: 'page-message',
templateUrl: 'message.html'
})
export class MessagePage {
tabAllMessageRoot : AllMessagePage;
tabUnreadMessageRoot: UnreadMessagePage;
tabReadMessageRoot: ReadMessagePage;
constructor(){
}
}/src/pages/message/message.html
<ion-content>
<ion-tabs>
<ion-tab [root]="tabAllMessageRoot" tabTitle="All"></ion-tab>
<ion-tab [root]="tabUnreadMessageRoot" tabTitle="Unread" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tabReadMessageRoot" tabTitle="Read" tabIcon="contacts"></ion-tab>
</ion-tabs>
</ion-content>Any help will be appreciate, Thanks
任何帮助将不胜感激，谢谢
回答by ieyan durian
If I have not mistaken your question, then I suggest that you check out ion-segment component. Click hereto see the documentation.
如果我没有看错你的问题，那么我建议你检查离子段组件。单击此处查看文档。
So, in the message.html page, you should add this:
因此，在 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>
Then, add some function to the message.ts file to reflect what you did here.
然后，向 message.ts 文件添加一些函数以反映您在此处所做的操作。
onSegmentChanged(segmentButton: any) {
this.selectedSegment = all; //all, read, unread
this.showAll = true;
this.showRead = false;
this.showUnread = false;
}
Lastly, just use *ngIf to enable or disable content based on what you have chosen for the selectedSegment.
最后，只需使用 *ngIf 根据您为 selectedSegment 选择的内容启用或禁用内容。
<ion-content>
<ion-item *ngIf="showAll"></ion-item >
<ion-item *ngIf="showRead"></ion-item >
<ion-item *ngIf="showUnread"></ion-item >
</ion-content>
回答by Ray
This question shows up as #3 on Google search when searching for "ionic 3 tabs example". Since there is no answer, I can't imagine how much time it has wasted people coming here hoping for an example.
当搜索“ionic 3 tabs example”时，这个问题在谷歌搜索中显示为#3。既然没有答案，我无法想象浪费了多少时间来这里希望举个例子的人。
I've wasted hours because I took some what I assume was ok looking code from you original question. It probably doesn't matter to you now but for whomever Google sends here, one of the major problem was:
我浪费了几个小时，因为我从你原来的问题中拿了一些我认为看起来不错的代码。现在对您来说可能无关紧要，但对于 Google 派到这里的任何人来说，主要问题之一是：
You need add “=” sign instead of “:” ,
您需要添加“=”符号而不是“:”，
export class MessagePage {
tabAllMessageRoot : AllMessagePage;
tabUnreadMessageRoot: UnreadMessagePage;
tabReadMessageRoot: ReadMessagePage;
should be
应该
export class MessagePage {
tabAllMessageRoot = AllMessagePage;
tabUnreadMessageRoot = UnreadMessagePage;
tabReadMessageRoot = ReadMessagePage;
I've wasted hours of my time, hopefully this helps someone else.
我浪费了几个小时的时间，希望这对其他人有所帮助。
Lesson learned about taking code from unanswered questions!
从未回答的问题中获取代码的经验教训！
