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.publish('functionCall:onClick', event);

并在目标网页中订阅此类发布的事件

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

离子2：检测标签组件的变化

1 个答案: