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页面中的声明＆＃39;和＆＃39; entryComponents＆＃39;。

第二个是我尝试将标签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

我认为你在这里缺少的东西是离子标签的root属性。您可以尝试如下所示。

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

离子添加标签到页面

1 个答案: