Angular 离子2-通过菜单中的选项卡进行导航

你能帮我从侧菜单导航到另一个带有保存标签的页面吗

我的app.html

...
<a menuToggle tappable (click)="userPage(1)">User page</a>
...

我的标签

export class TabsPage {

    tab1Root = 'ProjectsPage';
    tab2Root = 'ContractorsPage';
    tab3Root = 'SuppliersPage';
    tab4Root = 'VacanciesPage';
    tab5Root = 'BeInTrendPage';
    tab6Root = 'UserPage';

    constructor() { }

}

当我从userPage（）函数转到用户页面时，页面上不显示选项卡。

来自：

您还可以通过调用

select（）

on来切换子组件中的选项卡 使用

NavController

实例的父视图。例如 假设您有一个

TabsPage

组件，您可以调用以下 从任何子组件切换到

选项卡oot3

：

switchTabs() {
  this.navCtrl.parent.select(2);
}

因此，一种方法是使用。我们的想法是在选择侧菜单中的选项时发布事件，并在

用户页面中订阅该事件，然后选择该选项卡作为活动选项卡

因此，在
app.component.ts
文件中的
userPage
方法中：

import { Events } from 'ionic-angular';

constructor(public events: Events) {}

userPage(user_id) {
  this.events.publish('user:selected', user_id);
}

然后在
UserPage
选项卡中：

import { Events, NavController } from 'ionic-angular';

constructor(public events: Events, public navCtrl: NavController) {

  this.events.subscribe('user:selected', (user_id) => {
    // First select this tab if any other tab was selected
    this.navCtrl.parent.select(5); // It's the 6th tab, so its index is 5

    // Now you can load the data using the user_id, and show it in the view
    // ...
  });

}

更新

根据您的评论，如果尚未创建选项卡，则可能不会发生任何事情（因为我们在构造函数中订阅事件）

因此，与其在
UserPage
选项卡上订阅该事件，不如尝试使用
TabsPage
（包含所有子选项卡的选项卡）。由于我们将使用parent选项卡，我们需要一个新的共享服务来存储所选的用户id。因此，创建一个新的共享服务，如下所示：

import {Injectable} from '@angular/core';

 @Injectable()
 export class ParamService {

  public selectedUser: any;

  constructor(){ }
}

还请将其添加到
NgModule
的提供者数组中（从
app.module.ts
文件）

因此，在
app.component.ts
文件中的
userPage
方法中，现在我们在发布事件之前使用共享服务保存用户id：

import { Events } from 'ionic-angular';

constructor(public events: Events, public paramService: ParamService) {}

userPage(user_id) {
  this.paramService.selectedUser = user_id;
  this.events.publish('user:selected');
}

删除
用户页面
选项卡的代码，并将其添加到
选项卡页面
：

import { ViewChild, ... } from '@angular/core';
import { Events, NavController, ... } from 'ionic-angular';

@ViewChild('tabs') tabRef: Tabs;

constructor(public events: Events, public navCtrl: NavController) {

  this.events.subscribe('user:selected', () => {
    // First select the proper tab if any other tab was selected
    this.tabRef.select(5);
  });

}

最后但并非最不重要的一点是，在
UserPage
选项卡中，使用
ionViewWillEnter
lifecycle钩子从
paramService
获取所选的
用户id
：

public userToShow: any;

constructor(public paramService: ParamService) {}

ionViewWillEnter() {
  this.userToShow = this.paramService.selectedUser;
}

在哪个组件中定义了
userPage（…）
方法？是否在任何其他选项卡内？组件
UserPage
在选项卡组件
tab6Root='UserPage'中定义
我问的是方法
userPage（…）
，而不是componentin app.component.tsI收到错误
NavController没有提供程序
不要在
app.component.ts
文件中导入
NavController
，就在
userPage
选项卡中。按照您写的那样做，但是现在调用该方法时什么也不会发生。没有错误。也许是因为我用的是离子3。但我从标签页进入用户页面，然后从侧边菜单打开它就可以了。嗯。。。似乎与手动导航到该选项卡之前未创建的选项卡相关。我已经更新了答案：）谢谢，很好。还有一个问题-是否可以从
app.component.ts
打开
AnyPage
并显示
选项卡
？如果我
此.nav.push（'AnyPage'）
选项卡不显示。
public userToShow: any;

constructor(public paramService: ParamService) {}

ionViewWillEnter() {
  this.userToShow = this.paramService.selectedUser;
}