Question

我有一个包含3个标签的标签应用：

主页
查找页面
Chats Page

我需要在主页上显示一个应该打开查找页面的可点击元素，并将一个名为filterOnSport的参数传递给它。

我想出了rootParams和Events publish / subscribe的组合作为解决方案。

首先，我在＆＃34;更改标签＆＃34;上实施了订阅。事件（我谈到了＆＃34; clear-find-tab-params＆＃34;稍后）：

// Tabs controller
export class TabsPage {
      @ViewChild(Tabs) tabs: Tabs;

      tab1Root: any = HomePage;
      tab2Root: any = FindPage;
      tab3Root: any = ChatsPage;

      findTabParams: any = {};

    constructor(public events: Events) {
        events.subscribe('change-tab', (tab, filterOnSport) => {
          console.log('TabsPage#constructor - change-tab event received with params: ', tab, filterOnSport);
          if (filterOnSport) this.findTabParams.filterOnSport = filterOnSport;
          this.tabs.select(tab);
        });

        events.subscribe('clear-find-tab-params', _ => {
          console.log('TabsPage#constructor - clear-find-tab-params event received.');
          this.findTabParams = {};
        });
      }
    }

然后我通过rootParams属性将params传递给Find选项卡：

<ion-tabs #tabs>
  <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" [rootParams]="findTabParams" tabIcon="search"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="chatbubbles" [tabsHideOnSubPages]=true></ion-tab>
</ion-tabs>

然后我通过动作功能从我的主页触发：

onSuggestedEventClick(sport: string): void {
    this.events.publish('change-tab', 1, sport);
  }

最后，在我的Find Page控制器中使用params：

ionViewWillEnter() {
    // Check if page is open with a sport to filter on, within parameters
    // Otherwise, default sport filter to 'all'
    let filterParam = this.navParams.get('filterOnSport');
    console.log('filter ', filterParam);

    if (filterParam) {
      this.sportFilteredOn = filterParam;
      // Clear findTabParams so it is not used again when navigating normally
      this.eventsCtrl.publish('clear-find-tab-params');
    } else {
      this.sportFilteredOn = 'all';
    }

    // Trigger the refresh of the events list
    this.refreshEventsList();
  }

我发布了一个＆＃34; clear-find-tab-params＆＃34;清除rootParams因为可以通过自然地单击“查找”选项卡来访问我的查找页面。在这种情况下，我不想过滤结果。

基于此，我有两个问题：

点击我的主页后，我被重定向到“查找”选项卡，结果被正确过滤。 clear事件发布得很好并且很受欢迎但是findTabParams似乎没有被清除......因为当我正常导航时回到我的Find选项卡（我的意思是点击选项卡）它会找到filterOnSport参数和过滤器在它上面......我怎么办？
是否还有其他方法，但更好的方法可以做我需要的事情？

****编辑解决方案****

我最终将clear-find-tab-params订阅修改为以下内容：

events.subscribe('clear-find-tab-params', _ => {
      console.log('TabsPage#constructor - clear-find-tab-params event received.');
      if (this.findTabParams.filterOnSport) this.findTabParams.filterOnSport = null;
    });

Answer 1

只需将clear-find-tab-params订阅更改为以下内容：

events.subscribe('clear-find-tab-params', _ => {
      console.log('TabsPage#constructor - clear-find-tab-params event received.');
      if (this.findTabParams.filterOnSport) this.findTabParams.filterOnSport = null;
    });

Answer 2

我做了类似的事情并且只使用了路线。然后我使用routerLink导航到路由并传递任何所需的参数。

您可以在此处查看完整示例：https://github.com/DeborahK/Angular-Routing（在APM-Final文件夹中）。

以下是路线：

RouterModule.forChild([
  {
    path: '',
    component: ProductListComponent
  },
  {
    path: ':id/edit',
    component: ProductEditComponent,
    children: [
      {
        path: '',
        redirectTo: 'info',
        pathMatch: 'full'
      },
      {
        path: 'info',
        component: ProductEditInfoComponent
      },
      {
        path: 'tags',
        component: ProductEditTagsComponent
      }
    ]
  }
])

]，

“info”和“tags”是两个标签。

以下是导航到标签的代码：

    <div class="wizard">
        <a [routerLink]="['info']" routerLinkActive="active">
            Basic Information  <span [ngClass]="{'glyphicon glyphicon-exclamation-sign':
                                                  !isValid('info')}"></span>
        </a>
        <a [routerLink]="['tags']" routerLinkActive="active">
            Search Tags  <span  [ngClass]="{'glyphicon glyphicon-exclamation-sign':
                                                  !isValid('tags')}"></span>
        </a>
    </div>

这就是它的样子：

Answer 3

更简单的方法是从HomePage（这是一个子选项卡）发布事件并在FindPage中订阅该事件，但不是使用rootParams，而是使用相同的事件来发送数据。请看一下 working plunker

就像你可以看到的那样，我们通过this.navCtrl.parent.select(1);直接从子标签中选择第二个标签。然后我们使用setTimeout等待几毫秒来为该选项卡选择一段时间，然后我们发布事件，发送一些数据：

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

@Component({...})
export class FirstTabPage {

  constructor(private navCtrl: NavController, private eventsCtrl: Events) {}

  public selectSecondTab(): void {
      let searchParam = 'HelloWorld';

      // Select the second tab
      this.navCtrl.parent.select(1);

      setTimeout(() => {

        // Publish the event to show the parameter
        this.eventsCtrl.publish('searchParam', searchParam);

      }, 50);
  }
}

然后在第二个选项卡中，我们订阅了该事件，我们也从事件中获取了数据，然后在离开选项卡时使用ionViewWillLeave挂钩清除参数：

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

@Component({...})
export class SecondTabPage {

  public parameter: string;

  constructor(private eventsCtrl: Events) {
    this.eventsCtrl.subscribe('searchParam', (searchParam) => {
      this.parameter = searchParam;
    });
  }

  ionViewWillLeave() {
    // Clean the parameter so next time it will be empty
    this.parameter = null;
  }

}

清除[rootParams]不起作用

3 个答案: