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>

, но ничего не работает.

Мне нужно как-то вызвать функцию parent (app.component) на моей дочерней странице.Я думаю, моя проблема ясна, если не спросить меня о деталях.Любые идеи или направления будут оценены.

Answer 1

Существует два подхода

1. Создание Сервиса и внедрение или использование в обоих приложениях (родительский) и Ребенок Компонент.
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');
    }
}

Приложение / родительская страница

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