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

Question

我正在尝试在 ionic 3 的选项卡中创建三个选项卡，但是我无法使其正常工作。

Here is an example of what i trying to do，但它似乎是通过早期版本的 ionic 实现的。我正在使用离子 3.10.3

来自 CLI 的 ionic -v 打印 3.10.3

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

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

这是我的项目的内容

主要

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

其他选项卡的内容是基本的，所以我只放消息选项卡的内容

消息

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

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

Answer 1

如果我没有弄错你的问题，那么我建议你检查一下 ion-segment 组件。点击here查看文档。

因此，在 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>

然后，向 message.ts 文件添加一些函数以反映您在此处所做的操作。

onSegmentChanged(segmentButton: any) {
  this.selectedSegment = all; //all, read, unread
  this.showAll = true;
  this.showRead = false;
  this.showUnread = false;
}

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

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

Answer 2

当搜索“ionic 3 tabs example”时，此问题在 Google 搜索中显示为 #3。由于没有答案，我无法想象它浪费了多少时间来这里希望一个例子的人们。

我浪费了几个小时，因为我从您的原始问题中获取了一些我认为看起来不错的代码。现在对您来说可能无关紧要，但对于 Google 发送到这里的任何人来说，主要问题之一是：

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

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

应该是

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

我浪费了我的时间，希望这对其他人有所帮助。

学习如何从未回答的问题中获取代码！