Ionic 3 组合标签页和侧边菜单不起作用答案

【问题标题】：Ionic 3 combination tabspage and sidemenu not workingIonic 3 组合标签页和侧边菜单不起作用
【发布时间】：2019-01-04 04:30:37
【问题描述】：

我关注了this 的文章，将sidemenu 和Tabs 页面结合起来。

app.html 有我的菜单。我用#nav 将 ion-nav 绑定到我的 ion-menu 的 [Content]。

在我的 app.component.ts 中，我点击了事件。他们将不同的 Tabs 页面设置为 root，并且只有一个普通页面。

看起来像这样：

@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.select(0)。同样的问题。

我目前正在使用 ionic serve 进行测试。

"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",

谁有想法，怎么了？

更新

在尝试和错误编码后，在标签页的 .ts 文件中从 [selectedIndex]="0" 更改回 myTabs.select(0)，如文章中所示。这不起作用。但我像这样超时了：

ionViewDidLoad() {

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

现在我可以看到，选项卡上的内容已正确替换。但它看起来不是一个好的解决方法，因为现在我看到旧内容在通过选择替换之前加载。如果我现在打开标签页 2，我可以从标签页 1 中看到呈现的标签页 1 后面的内容（正在执行标签页 1 的 ionViewDidLoad、ionViewWillEnter...）。然后选择完成后，tabspage 2的tab 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();
            }
        });
    }
}

例如其中一个 Tabs 页面（其他的都是这样的）：

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

工作流程（没有超时解决方法）：

在以 root 身份登录主页替换为 RealisationTabsPage 后，加载 Tab 1 子页面（准备）
open Menu 点击一个菜单点，打开另一个Tabs页面，例如contacttabspage
contacttabspage 的选项卡已加载。此选项卡的选项卡 1 已选中并处于活动状态。但是contacttabspage标签1后面的子页面仍然是realisationtabspage（准备）的子页面。
现在我打开菜单并转到无选项卡页面 (FAQ)。常见问题解答已正确呈现。
打开菜单：我要去一个选项卡页面，不管哪个选项卡页面（实现、联系人、信息、管理...），选项卡页面正确呈现。
现在我要从这个标签页转到另一个标签页，所以问题又来了。我看到了上一个标签页的上一个子页面。

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

【问题讨论】：

从标签页模板中删除“ion header”...将菜单切换按钮从联系人和联系人页面移动
您可以使用 ion footer 并创建带有 ngfor 和 ngclass 的选项卡之类的按钮以用于活动非活动
我的第一个变体是带有菜单切换的标题位于子页面中。这不起作用。所以我再次打开文章，看看文章作者在标签页上的标题。所以我将菜单切换标题从子页面移动到标签页。 ://

标签： ionic-framework ionic3 ion-menu

【解决方案1】：

制作了这个sidemenu+tabs的工作示例。希望对您有所帮助。

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

【讨论】：

我更新了我的帖子、应用程序组件是怎样的以及一个标签页示例。就像教程文章中描述的那样。
请看一下我发布的链接

【解决方案2】：

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

【讨论】：