2017-05-05 70 views
0

我有一個底部標籤欄,其中有4個選項卡(主頁,關於,聯繫人,更多)以下是標籤頁的代碼。Ionic 2:導航 - 標籤欄推後丟失

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 { 構造(公共navCtrl:NavController){}

ionViewWillEnter() { 

} 

gallery() { 

    this.navCtrl.push(GalleryPage); 
} 

}

當我點擊更多選項卡欄中,頁面將顯示在當前標籤欄的頂部。在「圖庫」上單擊事件後,它會重定向到圖庫頁面,直到現在都很好,但是我的ta圖庫頁面中缺少b欄。

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


} 

那麼,請告訴我,我要去哪裏錯了....

+0

你可以發佈'圖庫'頁面結構嗎? –

+0

http://stackoverflow.com/a/41842309/4826457 –

+0

你把'tabsHideOnSubPages'設置爲false嗎? –

回答

0

讓我們解釋這個問題。

你有一個標籤頁,它有一個容器來顯示選中的標籤。 您具有處於標籤視圖中的組件,並且具有自己的導航。

在這裏,這函數存在TabsPage:

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

的navCtrl,它指的是TabsPage的。所以,如果你推到這裏,它將不會進入視圖,而是遠離TabsPage。

您只需要做的就是創建更多頁面組件並將您的畫廊功能移至那裏

+0

我早期使用這種方法,但這種方法有問題.ie,當我在主頁,我點擊更多它去更多的組件,並顯示更多的HTML隱藏主頁,但它應該顯示在主頁或任何其他活動的頁面上。 – Newcomer