从子视图中刷新父内容

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类导入我的Popoverpage ...即使我使用另一个.ts文件进行Popoverpage ...

Answer 1

Here is a great read about component interaction

在您的孩子中使用@Output，然后在父

中收听

子组件.ts - 声明一个Output变量，该变量在您的函数中调用时将发出一个事件。

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

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

父组件html - 将子事件发射器与父组件中的函数链接

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

父组件.ts - 创建一个侦听事件的函数

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