如何在离子中的不同页面上添加选项卡页面

Question

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

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

// all imports are done.
@Component({
    templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = AlarmPage;
tab2Root = AddPage;
tab3Root = AlbumsPage;
tab4Root = AlertPage;
constructor() {
}

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

Answer 1

无需以下功能才能导航到选项卡页

gotToOtherPage(){
    this.navCtrl.push(OtherPage);
}

只是将其删除。此代码正常工作。但是您必须在app.module.ts中包含您的添加页面

我为您完成了一个示例项目，这是链接：tabspage

在这里，我添加了一个称为详细页面的页面。检查一下