Question

你能帮我从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,
  }) ;
}

我的tabs.ts

export class TabsPage {

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

    constructor() { }

}

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

Answer 1

来自Ionic docs：

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

所以一种方法是使用Events。我们的想法是在选择侧边菜单中的选项时发布事件，并在UserPage中订阅该事件，并选择该选项卡作为活动选项。

所以，在userPage文件的app.component.ts方法中：

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（包含所有子标签的那个）。由于我们将使用父标签，因此我们需要一个新的共享服务来存储选定的 user_id 。因此，创建一个新的共享服务，如下所示：

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

 @Injectable()
 export class ParamService {

  public selectedUser: any;

  constructor(){ }
}

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

因此，在userPage文件的app.component.ts方法中，现在我们在发布事件之前使用共享服务保存用户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生命周期挂钩从user_id获取所选的paramService：

public userToShow: any;

constructor(public paramService: ParamService) {}

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

离子2 - 从菜单中选项卡导航

1 个答案: