时间戳

首页 > 解决方案 > Ionic 3 从子页面的根页面运行功能

ionic3 - Ionic 3 从子页面的根页面运行功能

问题描述

使用离子 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
  }
}

应用程序.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）函数。我想我的问题很清楚，如果不问我详细信息。任何想法或方向将不胜感激。

标签： ionic3angular5

解决方案

有两种方法

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

推荐阅读