Ionic 2 - 使用菜单中的选项卡导航答案

【问题标题】：Ionic 2 - Navigation with Tabs from MenuIonic 2 - 使用菜单中的选项卡导航
【发布时间】：2017-12-29 16:27:07
【问题描述】：

你能帮我从 SideMenu 导航到另一个保存选项卡的页面吗？

我的 app.html

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

我的 app.component.ts

userPage(user_id) {
  this.nav.push('UserPage', {
     userId : user_id,
  }) ;
}

我的标签.ts

export class TabsPage {

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

    constructor() { }

}

当我从 userPage() 函数转到用户页面时，选项卡未显示在页面上。

【问题讨论】：

userPage(...) 方法定义在哪个组件中？是否在任何其他选项卡内？
组件UserPage定义在标签组件tab6Root = 'UserPage';
我问的是方法userPage(...)，而不是组件
在 app.component.ts 中

标签： angular typescript ionic2 ionic3

【解决方案1】：

来自Ionic docs：

您还可以通过调用select() on 从子组件切换选项卡使用NavController 实例的父视图。例如，假设您有一个 TabsPage 组件，您可以调用以下命令从任何子组件切换到TabsRoot3：
switchTabs() {
  this.navCtrl.parent.select(2);
}

因此，一种方法是使用Events。这个想法是在选择侧面菜单中的选项时发布一个事件，并在UserPage 中订阅该事件，然后选择该选项卡作为活动选项卡。

所以，在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
    // ...
  });

}

更新

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

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

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

 @Injectable()
 export class ParamService {

  public selectedUser: any;

  constructor(){ }
}

请将其添加到您的 NgModule 的 providers 数组中（来自您的 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');
}

删除UserPage标签的代码，并将其添加到TabsPage：

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 生命周期挂钩从paramService 中获取选定的user_id：

public userToShow: any;

constructor(public paramService: ParamService) {}

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

【讨论】：

我收到了错误No provider for NavController
不要在app.component.ts文件中导入NavController ，只在UserPage选项卡中。
照你写的做了，但现在调用该方法时什么也没有发生。没有错误。也许是因为我使用的是 Ionic 3。但是我从标签转到用户页面，然后从侧面菜单打开它是有效的。
嗯...似乎与在您手动导航到它之前未创建的选项卡有关。我已经更新了答案:)
感谢工作正常。还有一个问题——是否可以从app.component.ts 打开AnyPage 并显示Tabs？如果我 this.nav.push('AnyPage') Tabs 没有显示。