Ionic 2: Navigation - Tableiste fehlt nach dem Drücken

Question

Ich habe eine untere Tab-Leiste, die 4 Tabs (Startseite, über, Kontakt, mehr) hat, ist der Code der Tabs-Seite.

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); 
    } 
} 

Und mein 'Seite mehr' Komponente 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' 

}) 

Export Klasse MorePage { Konstruktor (public navCtrl: NavController) {}

ionViewWillEnter() { 

} 

gallery() { 

    this.navCtrl.push(GalleryPage); 
} 

}

, wenn ich mehr auf der Registerkarte klicken Sie auf Bar, Seite mehr wird über der aktuellen Tab-Leiste angezeigt. Nach Klick Ereignis auf "Galerie" leitet es auf Galerieseite es ist alles gut bis jetzt, aber meine ta Die b-Leiste fehlt in der Galerie-Seite.

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); 
     } 


} 

Also, mir bitte sagen, wo ich falsch würde ....

Answer 1

Lässt das Problem erklären.

Sie haben eine Registerkarte und haben einen Container, um die ausgewählte Registerkarte anzuzeigen. Sie haben Komponenten, die in der Ansicht der Registerkarten sind und ihre eigene Navigation haben.

Diese hier Funktion existiert in TabsPage:

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

Die navCtrl, dass es sich bezieht von TabsPage ist. Wenn Sie also hier drücken, wird es nicht in die Ansicht, sondern weg von der TabsPage geschoben.

Einfach alles, was Sie tun müssen, ist erstellen Sie eine mehr Seite Komponente und bewegen Sie Ihre Galerie-Funktion dort.