ionic-framework - ionic 2 : How to call parent page function from Popover component

Question

我有一个带有打开 PopoverController 的按钮的页面组件。根据 Ionic Docs，popovers 的内容需要另一个特定的组件。

在主页中，我有一个需要从 popover 组件调用的函数，但我还没有找到如何访问“ parent ”方法。我试过 @ViewChild但 child 是undefined .

import { Component, ViewChild } from '@angular/core';
import { Content, NavController, NavParams, Platform, PopoverController, ViewController } from 'ionic-angular';

// Parent page:
@Component({
    selector: 'page-favorites',
    templateUrl: 'favorites.html'
})
export class FavoritesPage {
    constructor(public popoverCtrl: PopoverController) {
    }

    openOptions(ev?: Event) {
        let popover = this.popoverCtrl.create(FavoritesPopover);
        popover.present({ ev: ev });
    }

    showConfirm() {
        // This is the function I need to call from FavoritesPopover
    }
}

// Popover content:
@Component({
  template: `
    <ion-list>
        <button ion-item (click)="showConfirm()">Show confirm</button>
    </ion-list>`
})
export class FavoritesPopover {
    @ViewChild(FavoritesPage) favoritesPage: FavoritesPage;

    showConfirm() {
        this.favoritesPage.showConfirm(); // It doesn't work, favoritesPage is undefined
    }
}

如您所见，我刚刚开始使用 Ionic 2 和 Angular，因此非常感谢您的帮助!

Answer 1

您可以通过将对象作为第二个参数传递给 create 来将数据(和函数)传递给弹出框。方法:

openOptions(ev?: Event) {
    let popover = this.popoverCtrl.create(FavoritesPopover, {
        showConfirm: function() {
            alert('yay');
        }
    });
    popover.present({ ev: ev });
}

然后，你应该注入(inject) NavParams到您的弹出 View ，以及 get您传递的功能:

import {NavParams} from 'ionic-angular';

export class FavoritesPopover {
    constructor(public params: NavParams) {}

    showConfirm() {
        this.params.get('showConfirm')(); 
    }
}