如何在离子的不同页面上添加标签页

时间:2018-03-26 07:09:09

标签: ionic-framework ionic2 ionic3

我已经检查了与此相关的各种其他问题,但是没有得到答复,所以我正在写回来。

tabs.html

<ion-tabs>
    <ion-tab [root]="tab1Root" tabIcon="ios-add"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="ios-alarm"></ion-tab>
    <ion-tab [root]="tab3Root" tabIcon="ios-albums"></ion-tab>
    <ion-tab [root]="tab4Root" tabIcon="ios-alert"></ion-tab>
</ion-tabs>

tabs.ts

// all imports are done.

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

tab1Root = AlarmPage;
tab2Root = AddPage;
tab3Root = AlbumsPage;
tab4Root = AlertPage;

constructor() {

}

警报-page.ts

//all imports are made
// syntaxes are done correctly

export class AlertPage {
    constructor(navCtrl: NavController){}

 gotToOtherPage(){

    this.navCtrl.push(OtherPage);
}

}

其他-page.ts

//When I navigate to other page from the above mentioned pages the tabs does not displayed on the OtherPage.

1 个答案:

答案 0 :(得分:0)

无需关注功能即可导航至标签页

gotToOtherPage(){

    this.navCtrl.push(OtherPage);
}

只需卸下它。这段代码很好用。但是你必须在app.module.ts中包含你添加的页面

我在这里为你做了一个示例项目链接: TabsPage

这里我添加了一个名为详细页面的页面。看看这个