Question

我紧随this文章之后，将补充菜单和标签页合并在一起。

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

在我的app.component.ts中，我单击“事件”。他们将不同的“标签”页面设置为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-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);
}

现在我可以看到，选项卡上的内容已正确替换。但它似乎不是一个好的解决方法，因为现在我看到在按select替换之前，旧内容正在加载。如果我现在打开tabspage 2，我可以从tabspage 1看到渲染的tab 1后面的内容（正在执行tab 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);
    }
}

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

将以根身份登录的主页替换为RealisationTabsPage之后，将加载Tab 1子页面（准备）
打开菜单单击菜单上的“点”，这将打开另一个“标签”页面，例如contacttabspage
contacttabs页面的选项卡已加载。此选项卡的选项卡1已选中并处于活动状态。但是contacttabspage的选项卡1后面的子页面仍然是realisationtabspage（准备）的子页面。
现在我打开菜单并转到“无标签”页面（FAQ）。常见问题解答已正确呈现。
打开菜单：我要进入“标签”页面，不必介意哪个标签页面（实现，联系方式，信息，管理...），标签页面是否正确呈现。
现在我要从此选项卡页转到另一个选项卡页，因此再次出现问题。我看到上一个标签页的上一个子页。

如果我使用的不是select（）函数，则会出现相同的问题。

Answer 1

制作侧面菜单和标签的工作示例。希望对您有帮助。

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

Answer 2

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

Ionic 3组合标签页和侧面菜单不起作用

2 个答案: