推动后标签消失离子3答案

【问题标题】：Tabs disappears ionic 3 after push推动后标签消失离子3
【发布时间】：2018-01-28 18:11:08
【问题描述】：

使用this.navCtrl.push(NamePage);后我的标签消失了

我不明白，我需要使用@ViewChild 还是其他功能？我在 app.module.ts

中将tabsHideOnSubPages 设置为false

例如：https://github.com/Nicolas-PL/TestMenu

文件是：src/pages/tabs/tabs.ts 和 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（标签消失）

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

}

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

提前谢谢你！

【问题讨论】：

您能否创建一个完整、最小且可验证的示例并将代码直接添加到您的问题中？
嗨！完毕！谢谢
你能把相关的code也放在这里（在你上面的帖子上）吗？
您好，完成！请帮帮我:)

标签： angular typescript ionic-framework ionic3

【解决方案1】：

如果您需要从 overlay 组件（popover、modal、alert 等）导航，则必须按如下方式进行。

test.ts

export class TestPage {
    constructor(
      public viewCtrl: ViewController
      public appCtrl: App
    ) {}

    openMenu() {
      this.viewCtrl.dismiss();
      this.appCtrl.getRootNav().setRoot(HomePage);
    }
  }

您可以阅读有关it here 的更多信息（请参阅标题下方的Navigating from an Overlay Component）。

【讨论】：

【解决方案2】：

我刚刚找到了解决方法。

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

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

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

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

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

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

【讨论】：