Ionic 2：导航 - 推送后标签栏丢失

Question

我有一个底部标签栏，它有 4 个标签（主页、关于、联系人、更多）以下是标签页的代码。

HTML：

<page-more [hidden]="more"></page-more>

<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
<ion-tab  (ionSelect)="more1()" tabTitle="More" tabIcon="more"></ion-tab>

ts：

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

    tab1Root: any = HomePage;
    tab2Root: any = AboutPage;
    tab3Root: any = ContactPage;
    tab4Root: any = MorePage;
    more: boolean = true;

    constructor(public navCtrl: NavController) {
    }

    more1() {
        if (this.more == true) this.more = false; else this.more = true;
    }

    gallery() {
        this.navCtrl.push(GalleryPage);
    }
}

还有我的“更多页面”组件 html：

    <ion-footer>
    <ion-toolbar position="bottom">      
        <ion-segment>
            <ion-segment-button title="Gallery" value="all" (click)="gallery()">
                <ion-icon name="images"></ion-icon>
            </ion-segment-button>
        </ion-segment>    
    </ion-toolbar>
</ion-footer>

更多Page.ts：

@Component({
selector: 'page-more',
templateUrl: 'More.html'

})

导出类 MorePage { 构造函数（公共 navCtrl：NavController）{}

ionViewWillEnter() {

}

gallery() {

    this.navCtrl.push(GalleryPage);
}

}

当我在标签栏上单击更多时，更多页面将显示在当前标签栏的顶部。在“图库”上单击事件后，它会重定向到图库页面，到目前为止一切都很好，但是我的标签栏在图库页面。

GalleryPage Html:

   <ion-header>
    <ion-navbar>      
        <ion-title>Gallery</ion-title>
    </ion-navbar>
</ion-header>


<ion-content padding>

    <div *ngIf="!showImages">
        <ion-list *ngFor="let g of galleryData">
            <ion-card>
                <img src="assets/{{g.eventThumbImage}}" alt="your image" (click)="getEventImages(g.imageeventId)">
                <ion-card-content>
                    <ion-card-title>
                        <a (click)="getEventImages(g.imageeventId)">{{g.photoEventName}}</a>
                    </ion-card-title>
                </ion-card-content>
            </ion-card>
        </ion-list>
    </div>

</ion-content>

GalleryPage ts：

@Component({

selector:'gallery-page',

templateUrl: 'gallery.html'

})



export class GalleryPage
 {


 galleryData;

 showImages: boolean;

 eventImagesData: Array<any> = [];

 results: any[];


    constructor(public navCtrl: NavController, private apiService: ApiService) {
    }



       ionViewWillEnter() {

           this.getImages();

       }



       getImages() {

        this.showImages = false;
        this.apiService.getData('GalleryController/CallForImageEvents')
            .subscribe(galleryData => this.galleryData = galleryData);
       }


}

所以，请告诉我我哪里出错了......

Answer 1

让我们解释一下问题。

您有一个标签页，它有一个容器来显示所选标签。 您拥有位于选项卡视图中的组件并拥有自己的导航。

这个here函数存在于TabsPage中：

gallery() {
    this.navCtrl.push(GalleryPage);
}

它所指的navCtrl 是TabsPage。所以如果你推到这里，它不会推入视图，而是推离 TabsPage。

您只需创建一个更多页面组件并将您的图库功能移到那里。