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>

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

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

您只需要做的就是创建更多页面组件并在那里移动您的图库功能。

离子2：导航 - 推杆后缺少标签栏

1 个答案: