离子2：检测选项卡组件的更改

我有一个应用程序，其中选项卡布局的每个选项卡都与给定客户端的属性（即配置文件，财务等）的不同方面有关。当客户端发生变化时，我希望父组件能够检测到它。离子2：检测选项卡组件的更改

似乎只有通过[rootParams]="foo"传递数据到选项卡的输入，但我不知道如何检测父母中的foo更改。

ngOnChanges()似乎没有更新到foo时触发。我相信我需要使用Observables只是不知道如何实现。

这是我到目前为止。从索引中选择一个客户后，我们移动到标签组件：

卡组件（ClientGenericPage）

@Component({ 
    templateUrl: 'client-generic.html' 
}) 

export class ClientGenericPage { 
    client:any; 
    constructor(
    public navParams: NavParams) { 

    this.client = navParams.get('client'); 
    this.clientParams = { 
     client: this.client 
    } 
} 

<ion-tabs class="tabs-basic"> 
    <ion-tab tabTitle="Profile" [root]="profilePage" tabIcon="user-o" [rootParams]="clientParams" #profile></ion-tab> 
    <ion-tab tabTitle="Weigh Ins" [root]="weighinsPage" tabIcon="scale-bathroom" [rootParams]="clientParams" #weighins></ion-tab> 
    <ion-tab tabTitle="Finance" [root]="financePage" [tabBadge]="alerts.financial" tabBadgeStyle="danger" tabIcon="attach-money" [rootParams]="clientParams" #finance></ion-tab> 
    <ion-tab tabTitle="Images" [root]="imagePage" [tabBadge]="alerts.images" tabBadgeStyle="danger" tabIcon="fa-image" [rootParams]="clientParams" #images></ion-tab> 
</ion-tabs>

我再使孩子标签更新。例如在第一个标签ProfilePage。

export class ClientDetailsPage { 
    constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    private filterObject: FilterObject, 
    public http: Http, 
    public modalController: ModalController, 
    private clientService: ClientService, 
    private app: App 
) { 
    this.client = navParams.get('client'); 

    // Example function where I make an update to client 
    updateForm(fab) { 
    this.clientService.update(this.client, "client", this.token) 
     .subscribe(
     data => { 
      this.client = data 
      this.clientService.handleResponse("Successfully updated the client!") 
     }, 
     err => this.clientService.handleResponse("Ut oh.. couldn't update the client!"), 
     () => fab.close() 
    ) 
    }

如何提醒家长该客户端已经改变，所以其他选项卡更新呢？

来源

2017-06-02 Jeremy Thomas

好像你正在寻找？ https://angular.io/docs/ts/latest/cookbook/component-communication.html – Alex

换句话说，要在发生变化时发出事件？它似乎是如此重复，我甚至不知道在哪里听的事件，因为父母不是真正的标签组件 –

嗯，我们基本上没有任何工作，因为你没有提出任何代码，并只是与评论*我不知道如何检测foo *中的变化。所以我不能给出更好的答案。但我给出的链接显示您的（其他）选项相当好。作为旁注，您还可以决定何时发布更改。 – Alex

我认为你可以利用这里的事件功能。您可以触发这样

this.events.publish('functionCall:onClick', event);

事件和订阅`@ Output`在你的目标页面发布这样的事件

this.events.subscribe('functionCall:onClick', eventData => { 
    //do something 
});

来源

2017-06-03 08:51:44 SAJ

离子2：检测选项卡组件的更改

回答

相关问题