Question

你好

我的离子应用上的链接有问题。我正在尝试设置新标签，但我遇到链接问题。

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>

tabs.ts

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

import { ListPage } from '../list/list';
import { HomePage } from '../home/home';


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

  tab1Root = HomePage;
  tab2Root = ListPage;
  constructor() {

  }
}

如何添加标签3和4的链接？谢谢！

Answer 1

Tab 3＆amp;标签4必须链接到新页面。您必须先创建这些新页面。要创建这些页面，请使用以下Ionic CLI命令：

ionic generate page Chat

ionic generate page Breaker

（文件https://ionicframework.com/docs/cli/generate/）：

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

然后，按照您在标签1和标签2中看到的完全相同的惯例。

例如，假设Tab 3将转到名为 ChatPage 的页面。选项卡4将转到名为 BreakerPage 的页面。您的 tabs.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 页面。在您提供的示例中，它有两个结尾的最后一个标签。

IONIC |如何在标签中设置新页面？

1 个答案: