Ionic 2：タブコンポーネントの変更を検出する

Question

タブレイアウトの各タブは、特定のクライアントの属性（プロファイル、財務など）のさまざまな側面に関連するアプリがあります。クライアントに変更が発生すると、親コンポーネントがそれを検出できるようにしたいと思います。

データをタブに渡す唯一の入力は[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() 
    ) 
    } 

どのように私は他のタブも同様に更新されるように、クライアントは、変更されたことを親に警告しますか？

Answer 1

ここでイベント機能を利用できると思います。あなたは

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