Ionic framework IONIC |如何在选项卡中设置新页面？

你好

我的ionic应用程序上的链接有问题。 我正在尝试设置新选项卡，但链接有问题

tabs.html

 <ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="test1" tabIcon="md-mail"></ion-tab>

  <ion-tab [root]="tab2Root" tabTitle="test2" tabIcon="md-contact"></ion-tab>

  <ion-tab [root]="tab3Root" tabTitle="test3" tabIcon="md-chatbubbles">

     <ion-tab [root]="tab4Root" tabTitle="test4" tabIcon="md-beaker"></ion-tab>
     </ion-tab>
</ion-tabs>

如何将链接添加到选项卡3和4？

---

谢谢

选项卡3和选项卡4必须链接到新页面。您必须首先创建这些新页面。要创建这些页面，请使用以下ION CLI命令：

ionic generate page Chat

ionic generate page Breaker

（文件）：

我强烈建议使用CLI创建页面。当您使用generate参数时，它将构建出页面所需的所有内容（包括导出的模块、css、html等）。如果手动创建页面，可能会错过每个页面所需的一些有价值的支架。您可以使用NPM下载ionic CLI

然后，遵循与表1和表2完全相同的约定

例如，假设选项卡3将转到一个名为ChatPage的页面。选项卡4将转到名为BreakerPage的页面。您的选项卡.ts将如下所示：

import { Component } from '@angular/core';

import { ListPage } from '../list/list';
import { HomePage } from '../home/home';
import { ChatPage } from '../chat/chat';
import { BreakerPage } from '../breaker/breaker';


@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = ListPage;
  tab3Root = ChatPage;
  tab4Root = BreakerPage;

  constructor() {

  }
}

---

同时修复您的tabs.html页面。在您提供的示例中，最后一个选项卡有两个结尾。

看起来您的新页面尚未创建。确保您已经正确创建了聊天和断页。我已经在上面的答案中添加了关于如何做的说明。谢谢！！最后一个问题：如何首先打开第4页？@RoeeBendor在html文件中处理。selectedIndex值基于0，这意味着selectedIndex 2将在默认情况下激活第三个选项卡。

import { Component } from '@angular/core';

import { ListPage } from '../list/list';
import { HomePage } from '../home/home';
import { ChatPage } from '../chat/chat';
import { BreakerPage } from '../breaker/breaker';


@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = ListPage;
  tab3Root = ChatPage;
  tab4Root = BreakerPage;

  constructor() {

  }
}