离子添加标签到页面

Question

我正在尝试向 Ionic 中的页面添加标签。

这似乎是一项微不足道的任务，但由于某种原因它们没有显示。

我尝试了两种方法；

一个是添加/pages/tabs 和一个tabs.html / tabs.ts 文件

tabs.html 页面。

<ion-tabs>
   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> 
   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle">
   </ion-tab>
</ion-tabs>

tabs.ts 页面

   import { Component } from '@angular/core';
   import { AboutPage } from '../about/about';
   import { HomePage } from '../home/home';

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

      tab1Root = HomePage;
      tab2Root = AboutPage;

     constructor() {
     }
    }

然后将标签部分添加到我的 app.module.ts 页面中的“声明”和“入口组件”中。

第二个是我尝试将标签 html 添加到主页视图中......

<ion-content padding>
<ion-tabs>
<ion-tab (click)="nav.setRoot(pages2.homePage)" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab (click)="nav.setRoot(pages2.aboutPage)" tabTitle="About" tabIcon="information-circle"></ion-tab>
</ion-tabs>
</ion-content>

在这两种实现中，我都没有显示标签栏。

Answer 1

我认为您在这里缺少的是 ion-tab 的根属性。您可以尝试如下所示。

<ion-tabs>
<ion-tab [root]="tab1Root" (ionSelect)="nav.setRoot(pages2.homePage)" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab1Root" (ionSelect)="nav.setRoot(pages2.aboutPage)" tabTitle="About" tabIcon="information-circle"></ion-tab>
</ion-tabs>