推后弹片消失离子3 [英] Tabs disappears ionic 3 after push
问题描述
使用this.navCtrl.push(NamePage);
我不明白,我需要使用@ViewChild
还是其他功能?
我在 app.module.ts
false
上设置了tabsHideOnSubPages
示例: 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);
,但是没有用..
提前谢谢!
我刚刚找到了解决方法.
如果从不在选项卡中的页面调用push(),则选项卡消失. 所以,我打电话给一个事件
this.events.publish('gotochat', { item: element });
然后,我导航到我的根选项卡
this.nav.setRoot('TabsPage', { index: 1 }, {
animate: true,
direction: 'forward'
});
在登录页面中,我听了事件并推送了所需的页面.
this.events.subscribe('gotochat', (item) => {
this.navCtrl.push('ItemDetailPage', {
home: true,
chat: 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屋!