清除[rootParams]不起作用

Question

我有3个选项卡标签一个应用程序：

1. 首页
2. 查找页面
3. 聊天页面

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

我想出了rootParams和Events发布/订阅组合作为解决方案。

首先我实现的“更改标签”事件的订阅（我谈到了“明确的发现标签-PARAMS”后）：

// 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 = {}; 
     }); 
     } 
    } 

然后我通过PARAMS到查找选项卡通过rootParams属性：

<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); 
    } 

最后，消费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(); 
    } 

我发布一个“明确的发现标签-PARAMS”清除rootParams因为我查找页面可以通过自然点击查找选项卡进行访问。在这种情况下，我不想过滤结果。

在此基础上我有两个问题：

1. 我去了我的主页上点击我重定向到查找选项卡，结果正确过滤。清除事件发布良好，并得到好评，但findTabParams似乎没有被清除......因为当我正常导航（我的意思是单击该选项卡）时，回到“查找”选项卡时，它会找到filterOnSport参数和过滤器...我怎么办？
2. 有没有其他的方法，但更好的做我所需要的？

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

我最后修改明确找到的标签-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

只需要更改明确的发现标签-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 
     } 
    ] 
    } 
]) 

]，

“信息” 和 “标签” 是两个标签。

这里是导航到标签的代码：

<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; 
    } 

}