Ionic 3组合选项卡和侧菜单不起作用

我跟随本文将侧菜单和选项卡页面结合起来。

app.html有我的菜单。我用#nav将离子导航绑定到我的离子菜单的[Content]。

在我的app.component.ts中，我单击了"事件"。他们将不同的选项卡页面设置为根，并且有一个普通页面。

这个看起来像这样：

@ViewChild('nav') nav: NavController;
public OnInformationClicked(): void {
this.nav.setRoot("InfoTabsPage");
}
public OnManagementClicked(): void {
this.nav.setRoot("ManagementTabsPage");
}
//some other Tabs pages
//the normal page
public OnFaqClicked(): void {
this.nav.setRoot("FaqPage");
}

在我的标签页中，我使用[selectedIndex]，如下所示：

<ion-header>
<ion-navbar>
<ion-buttons left>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-tabs [selectedIndex]="0">
<ion-tab [root]="contactPersonRoot" tabTitle="{{tabs1Name}}" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="contactSupportRoot" tabTitle="{{tabs2Name}}" tabIcon="information-circle"></ion-tab>
</ion-tabs>

但它不起作用。

问题：当我打开菜单并更改选项卡页面时，我可以看到选项卡是如何更改的，右选项卡图标是如何选择的，但选项卡上的内容没有更改。如果我转到正常页面，这将正确显示。如果我从普通页面转到选项卡页面，则选项卡页面将正确显示。如果我试图返回到另一个选项卡页面。它不会再次更改所有内容。

我试过了。。。。MyTabs。选择(0(。同样的问题。

我目前正在测试离子发球。

"ionic-angular": "3.9.2",
"ionicons": "4.1.2",
"@angular/animations": "6.0.3",
"@angular/common": "6.0.3",
"@angular/compiler": "6.0.3",
"@angular/compiler-cli": "6.0.3",
"@angular/core": "6.0.3",
"@angular/forms": "6.0.3",
"@angular/http": "6.0.3",
"@angular/platform-browser": "6.0.3",
"@angular/platform-browser-dynamic": "6.0.3",
"@ionic-native/app-version": "^4.10.0",
"@ionic-native/background-mode": "^4.10.0",
"@ionic-native/camera": "^4.10.0",
"@ionic-native/core": "4.7.0",
"@ionic-native/in-app-browser": "^4.9.1",
"@ionic-native/network": "^4.7.0",
"@ionic-native/splash-screen": "4.7.0",
"@ionic-native/status-bar": "4.7.0",
"@ionic/storage": "^2.1.3",

有人知道怎么了吗？

更新

经过反复尝试编码，从[selectedIndex]="0"改回了标签页的.ts文件中的myTabs.select(0(，如文章中所述。这不起作用。但我暂停了一下，就像这样：

ionViewDidLoad() {
let _self = this;
setTimeout(function(){
_self.tabRef.select(0);
},100);
}

现在我可以看到，选项卡上的内容被正确替换了。但这看起来不是一个好的解决方法，因为现在我看到旧内容在select替换之前就已经加载了。如果我现在打开选项卡2，我可以从选项卡1中看到选项卡1后面呈现的内容(选项卡1的ionViewDidLoad、ionViewWillEnter…正在执行(。则在完成选择之后，呈现选项卡2的选项卡1。

更新2

app.html：

<ion-menu [content]="nav">
<ion-header>
<ion-toolbar>
<ion-title>{{menuTitle}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item (click)="OnInformationClicked()">
<ion-icon name="information" item-start color="primary"></ion-icon>
<ion-label>Info</ion-label>
</button>
<button ion-item (click)="OnManagementClicked()">
<ion-icon name="build" item-start color="primary"></ion-icon>
<ion-label>Manage</ion-label>
</button>
<button ion-item (click)="OnRealisationClicked()">
<ion-icon name="clipboard" item-start color="primary"></ion-icon>
<ion-label>Real</ion-label>
</button>
<button ion-item (click)="OnContactClicked()">
<ion-icon name="contact" item-start color="primary"></ion-icon>
<ion-label>Contact</ion-label>
</button>
<button ion-item (click)="OnFaqClicked()">
<ion-icon name="help" item-start color="primary"></ion-icon>
<ion-label>FAQ</ion-label>
</button>
<button ion-item (click)="OnLogoutClicked()">
<ion-icon name="log-out" item-start color="primary"></ion-icon>
<ion-label>Logout</ion-label>
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #nav [swipeBackEnabled]="false"></ion-nav>

app.component.ts

@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild('nav') nav: NavController;
public menuTitle: string = GlobalHelper.GetResources().Application.Menu.Menu;

rootPage: any = HomePage;
constructor(private _css: ClientServerProvider, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
private _backgroundMode: BackgroundMode, private _appProvider: AppProvider) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
_backgroundMode.enable();
});
}

public OnInformationClicked(): void {
this.nav.setRoot("InfoTabsPage");
}
public OnManagementClicked(): void {
this.nav.setRoot("ManagementTabsPage");
}
public OnRealisationClicked(): void {
this.nav.setRoot("RealisationTabsPage");
}
public OnContactClicked(): void {
this.nav.setRoot("ContactTabsPage");
}
public OnFaqClicked(): void {
this.nav.setRoot("FaqPage");
}
public OnLogoutClicked(): void {
this._css.Logout().then(loggedOut => {
if (loggedOut) {
this._appProvider.InitApplication();
}
});
}
}

例如其中一个选项卡页面(其他页面是这样的(：

<ion-header>
<ion-navbar>
<ion-buttons left>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-tabs #myTabs>
<ion-tab [root]="preparationRoot" tabTitle="{{tabs1Name}}" tabIcon="browsers"></ion-tab>
<ion-tab [root]="processRoot" tabTitle="{{tabs2Name}}" tabIcon="logo-buffer"></ion-tab>
<ion-tab [root]="complaintRoot" tabTitle="{{tabs3Name}}" tabIcon="bulb"></ion-tab>
</ion-tabs>
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, MenuController, Tabs } from 'ionic-angular';
import { GlobalHelper } from '../../../../helper/globalHelper';
@IonicPage()
@Component({
selector: 'page-realisation-tabs',
templateUrl: 'realisation-tabs.html'
})
export class RealisationTabsPage {
@ViewChild('myTabs') tabRef: Tabs;
preparationRoot = 'PreparationPage';
processRoot = 'ProcessPage';
complaintRoot = 'ComplaintPage';
tabs1Name = GlobalHelper.GetResources().Application.Features.Realization.Preperation_Page_Header;
tabs2Name = GlobalHelper.GetResources().Application.Features.Realization.Process_Page_Header;
tabs3Name = GlobalHelper.GetResources().Application.Features.Realization.Complaint_Page_Header;
constructor(public menuCtrl: MenuController, public navCtrl: NavController) {
}

ionViewDidLoad() {
// after OnRealisationClicked
/*
* 
* with this workaround, Tabs changed, content (subpage) changed, correct * tab is active, but before the subpage changed to correct one, the previous 
* subpage is loading , nearly the result of the guide in the article
let _self = this;
setTimeout(function () {
_self.tabRef.select(0);
}, 100);*/
// this is the variant of the article, without timeout
//only Tabs are changed and the correct tab Icon is active and selected
// but content (subpage) is not changed, it is still the first subpage 
//of the previous tabspage
this.tabRef.select(0);
}
}

工作流(没有超时解决方法(：

在将登录主页作为根目录替换为RealizationTabsPage后，加载选项卡1子页面(准备(
打开菜单单击菜单点，打开另一个选项卡页面，例如contacttabspage
contacttabspage的选项卡已加载。该选项卡的选项卡1被选中并处于活动状态。但contacttabspage的选项卡1后面的子页面仍然是来自realizationtabspage(准备(的子页面
现在我打开菜单，进入"无选项卡"页面(FAQ(。FAQ已正确呈现
打开菜单：我要去一个选项卡页面，别管哪个选项卡页面(实现、联系、信息、管理…(，选项卡页面呈现正确
现在我要从这个选项卡转到另一个选项卡，所以又出现了问题。我看到了上一个选项卡的上一个子页面

如果我使用而不是select((函数，也会出现同样的问题。

制作了这个侧菜单+选项卡的工作示例。希望它能对您有所帮助。

https://stackblitz.com/edit/ionic-hmkkwc

我也遇到了类似的问题。将页面直接分配给选项卡变量，而不是字符串表示(页面名称(，并为选项卡容器提供唯一的id。这对我很有效。

相关内容

最新更新

热门标签：