Issue
I have a page component with a button that opens a PopoverController. According to the Ionic Docs, popovers need another specific component for its content.
In the main page I have a function that I need to call from the popover component, but I haven't found how to access to the "parents'" methods. I've tried with @ViewChild
but the child is 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
}
}
As you can see, I'm just starting to work with Ionic 2 and Angular, so any help would be so thankful!
Solution
You can pass data (and functions) to the popover by passing an object as the second argument to the create
method:
openOptions(ev?: Event) {
let popover = this.popoverCtrl.create(FavoritesPopover, {
showConfirm: function() {
alert('yay');
}
});
popover.present({ ev: ev });
}
Then, you should inject NavParams
to your popover view, and get
the function you passed:
import {NavParams} from 'ionic-angular';
export class FavoritesPopover {
constructor(public params: NavParams) {}
showConfirm() {
this.params.get('showConfirm')();
}
}
Answered By - Schlaus
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.