推动后标签消失离子3 [英] Tabs disappears ionic 3 after push

问题描述

我的标签在使用 this.navCtrl.push(NamePage);

后消失

我不明白，我需要使用 @ViewChild 还是其他函数?我在 app.module.ts

中的 false 上设置了 tabsHideOnSubPages

示例:https://github.com/Nicolas-PL/TestMenup>

文件是:src/pages/tabs/tabs.ts 和 src/pages/test/test.ts

import { Component } from '@angular/core';从离子角度"导入 { NavController }；从'../about/about'导入{ AboutPage }；从'../contact/contact'导入{ ContactPage}；从'../home/home'导入{主页}；从'../test/test'导入{TestPage}；从离子角"导入{ ModalController }；@零件({模板网址:'tabs.html'})导出类 TabsPage {tab1Root = 主页；tab2Root = 关于页面；tab3Root = 测试页；构造函数(公共 navCtrl:NavController，公共 modalCtrl:ModalController){}开模态(){让 myModal = this.modalCtrl.create(TestPage);myModal.present();}}

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

Test.ts(标签消失)

import { Component } from '@angular/core';导入 { IonicPage, NavController, NavParams } from 'ionic-angular';从'../home/home'导入{主页}；从 'ionic-angular' 导入 { App, ViewController }；@IonicPage()@零件({选择器:'页面测试'，模板网址:'test.html'，})导出类 TestPage {构造函数(公共 viewCtrl:ViewController，公共 navCtrl:NavController，公共 navParams:NavParams){}ionViewDidLoad() {}打开菜单(){this.navCtrl.push(主页);}}

我尝试过 this.navCtrl.root(HomePage); 但不起作用..

提前谢谢你！

解决方案

我刚刚找到了解决方法.

如果从不在选项卡中的页面调用 push()，选项卡会消失.所以，我称之为事件

this.events.publish('gotochat', { item: element });

然后，我导航到我的根标签

this.nav.setRoot('TabsPage', { index: 1 }, {动画:真实，方向:'前进'});

在land page，我监听事件并推送想要的页面.

this.events.subscribe('gotochat', (item) => {this.navCtrl.push('ItemDetailPage', {家:真的，聊天:item.item})})

My Tabs disappears after using this.navCtrl.push(NamePage);

I don't understand, I need use @ViewChild or another function? I have set tabsHideOnSubPages on false in app.module.ts

Example : https://github.com/Nicolas-PL/TestMenu

Files is : src/pages/tabs/tabs.ts and src/pages/test/test.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { TestPage } from '../test/test';
import { ModalController } from 'ionic-angular';

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

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = TestPage;

  constructor(public navCtrl: NavController,public modalCtrl: ModalController) {
  }

  openModal() {
    let myModal = this.modalCtrl.create(TestPage);
    myModal.present();

  }
}

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

Test.ts (tabs disappears)

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';
import { App, ViewController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-test',
  templateUrl: 'test.html',
})
export class TestPage {

  constructor(public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {}
  ionViewDidLoad() {}

  openMenu() {
  this.navCtrl.push(HomePage);
}

}

I have try this.navCtrl.root(HomePage); but don't works..

Thank you in advance !

解决方案

I just found a workaround.

Tab disappear if push() is called from a page that's not in the tab. So, I call an event

this.events.publish('gotochat', { item: element });

Then, I navigate to my root Tab

this.nav.setRoot('TabsPage', { index: 1 }, {
        animate: true,
        direction: 'forward'
      });

In the land page, I listen to the event and push the desired page.

this.events.subscribe('gotochat', (item) => {
  this.navCtrl.push('ItemDetailPage', {
    home: true,
    chat: item.item
  })
})

这篇关于推动后标签消失离子3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！