Question

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

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

来自CLI的

ionic -v打印3.10.3

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

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

以下是我的项目的内容

主要

/src/pages/main/main.ts

＆＃13;

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(){
				
	}
}

＆＃13;

/src/pages/main/main.html

＆＃13;

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

＆＃13;

其他标签的内容是基本的，所以我只想放置消息标签的内容

消息

/src/pages/message/message.ts

＆＃13;

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(){
				
	}
}

＆＃13;

/src/pages/message/message.html

＆＃13;

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

＆＃13;

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

Answer 1

如果我没有弄错你的问题，那么我建议您查看离子段组件。点击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

在搜索“离子3选项卡示例”时，此问题在Google搜索中显示为＃3。既然没有答案，我无法想象它浪费了多少时间来这里作为例子的人们。

我浪费了几个小时，因为我花了一些我认为可以从您的原始问题中查找代码的东西。现在可能对您来说并不重要，但是对于Google发送给这里的任何人，主要问题之一是：

您需要添加“ =”符号代替“：”，

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

应该是

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

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

课程学习了如何从未解决的问题中获取代码！

如何在离子3

2 个答案: