Ionic 3 运行 来自子页面根页面的函数

Question

使用 Ionic 3。

根页面app.component.ts:

...
export class MyApp {
  @ViewChild('myNav') nav: NavController
  rootPage:any = HomePage;
  sdata = [];
  getListName(){
    //returns an array a list for menu names 
   //sdata
  }
}

app.html:

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Μενού</ion-title>
    </ion-toolbar>
  </ion-header>

<ion-content>
  <ion-list>
    <button menuClose ion-item class="menulist elvtitles" *ngFor="let p of sdata" (click)="toElevator(p.elevatorID)">
      <ion-icon name="construct"></ion-icon> {{p.address}}
     </button>
  </ion-list>
</ion-content>

</ion-menu>
<ion-nav #myNav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

现在我想要的是再次 运行 页面（子）中的函数 getListName。为了刷新我的列表。喜欢：

export class ChildPage {
  refresh(){
   this.getListName()
  }
}

到目前为止我尝试过的是使用输出方法，但下面的方法不起作用：

export class ChildPage {
  @Output() intervalFired = new EventEmitter<any>();  
  refresh(){
     ...
     this.intervalFired.emit(dataAll);
  }
}

在app.html中：

<child-register (intervalFired)="onIntervalFired($event)"></child-register>

或

<button (intervalFired)="onIntervalFired($event)" menuClose ion-item class="menulist elvtitles" *ngFor="let p of sdata" (click)="toElevator(p.elevatorID)">
        <ion-icon name="construct"></ion-icon> {{p.address}}
      </button>

但没有任何效果。

我需要的是通过某种方式在我的子页面中调用父 (app.component) 函数。 我想我的问题很清楚，如果不是请向我询问详细信息。任何想法或指示将不胜感激。

Answer 1

有两种方法

1. 创建一个 Service 并在您的 App（Parent） 和 Child[=29= 中注入或使用] 组件。
2. 使用事件 (Pub/Sub)方法

例子

子页面

import { Events } from 'ionic-angular';

export class ChildPage {

    constructor(public events: Events) {}
    ChildPage() {
      console.log('Child Page!')
      this.events.publish('menu:update');
    }
}

App/Parent页数

import { Events } from 'ionic-angular';

export class MyApp {

    constructor(public events: Events) {
      events.subscribe('menu:update', () => {
         this.getListName()
      });
    }
  @ViewChild('myNav') nav: NavController
  rootPage:any = HomePage;
  sdata = [];
  getListName(){
    //returns an array a list for menu names 
   //sdata
  }
}