离子添加标签页

我想添加标签到离子页面。离子添加标签页

这似乎是一项简单的任务，但由于某种原因，他们没有显示。

我试过两种方法;

一种是添加/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页 '宣言' 和 'entryComponents'。

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

在两种实现我没有得到任何标签栏显示。

来源

2017-07-27 RedCrusador

我认为你在这里失踪的东西是离子选项卡的根属性。你可以尝试如下所示。

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

来源

2017-07-27 11:46:56 SAJ

使用该代码给我'不能读属性'setRoot'undefined' – RedCrusador

似乎问题是与别的东西。它与ionSelect中定义的点击操作有关。我不确定您要在点击操作中实现的目标。你可以尝试删除ionSelect，看看是否显示标签.. – SAJ

我只想导航到'homePage'和'aboutPage' – RedCrusador

离子添加标签页

回答

相关问题