离子2:导航 - 按下后丢失的标签栏

Question

i有一个底部标签栏，其中有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>

morepage.ts：

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

导出类MorePage { 构造函数(public 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

让我们解释问题。

您有一个选项卡页面，它具有一个容器来显示选定的选项卡。您的组件是标签的视图，并且具有自己的导航。

此处存在于TabSpage中：

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

它指的是TabSpage的NAVCTRL。因此，如果将其推入这里，它将不会推入视图，而是远离TabSpage。

您只需要做的就是创建一个更多的页面组件并将您的画廊功能移动。