从子视图中刷新父内容

Question

有没有一种简单的方法可以让父视图刷新它的内容？

在这种情况下，我正在更改排序模型，并想用这个新模型状态查询我的 http 请求。

import {Component} from '@angular/core';
import {LoadingController,NavController,PopoverController,ViewController} from 'ionic-angular';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
template: `
<ion-list radio-group [(ngModel)]="suchService.sort" class="popover-page">
  <ion-item>
    <ion-label>Entfernung aufsteigend</ion-label>
    <ion-radio (click)="sortchange()"value=""></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Neueste zuerst</ion-label>
    <ion-radio (click)="sortchange()"value="9"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Preis aufsteigend</ion-label>
    <ion-radio (click)="sortchange()"value="1"></ion-radio>
  </ion-item>
</ion-list>
`
})
class PopoverPage {

constructor(private suchService: SuchService, private viewController: ViewController) {

}
sortchange(){
  console.log("HALLO?"); <-- CALL FUNCTION OF ERGEBNISSE
  this.viewController.dismiss();
}
}
export class Ergebnisse {
.....
getResults(){...}
....
}

我无法将 Ergebnisse class 导入我的弹出页面...即使我为弹出页面使用另一个 .ts 文件...

Answer 1

Here is a great read about component interaction

在您的 child 中使用 @Output，然后在 parent

中收听它

child 组件 .ts - 声明一个输出变量，当它在您的函数中被调用时将发出一个事件。

@Output() sortChangedEvent = new EventEmitter<any>();

sortChange() {
  this.sortChangedEvent.emit({sortOrder: 'asc'});
}

Parent 组件 html - link child 事件发射器在你的 parent 组件

中有一个函数

<child-component (sortChange)="refereshListOrder($event)"></child-component>

Parent 组件 .ts - 创建一个监听事件的函数

refreshListOrder(event) {
  // sudo code below
  service.getData().withSortOrder(event.sortOrder);
}

Answer 2

嘿谢谢大家的回答。

我用了一些特定的离子 API 来解决它。

我正在通过

创建子弹出框

presentPopover(ev) {

let popover = this.popoverCtrl.create(PopoverPage, {});

popover.present({
  ev: ev
});

然后有一些来自 Ionic 的监听器解决了我的问题。

popover.onDidDismiss(data => {
//Can Use Data which is passed by Popover
});

从子视图中刷新父内容

Refresh parent Content out of child View

ionic2

angular