如何在离子 3 的选项卡内创建选项卡

Question

我正在尝试在 ionic 3 中的一个选项卡内创建三个选项卡，但是我无法让它工作。

这是我尝试做的一个例子，但它似乎是用早期版本的 ionic 实现的。我正在使用离子 3.10.3

来自 CLI 的 ionic -v 打印 3.10.3

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

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

这是我的项目的内容

主要的

/src/pages/main/main.ts 

/src/pages/main/main.ts 

/src/pages/main/main.html

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/message/message.ts

/src/pages/main/main.html

/src/pages/message/message.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>

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

Answer 1

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

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