标签: ionic-popover

我无法使它工作.弹出调用代码是

presentPopover(myEvent){
        //alert('invoke popup')
      let popover = this.popoverCtrl.create(PopoverPage, this.data);
      popover.present(
          {
            ev: myEvent
          }
      );
}

我目前需要访问的部分是:

export class PopoverPage{

  constructor(public viewCtrl: ViewController) {
   // alert('in the popup')  
   //alert(this.data)
  }

那么如何将数据放在popupover页面组件中呢？

我想调整离子弹出的高度以适应他的内容.我使用这个popover来显示一些信息:它们只包含一个ion-header和一个ion-content.

<ion-popover-view>
    <ion-header-bar>
        <h1 class="title">Title</h1>
    </ion-header-bar>
    <ion-content scroll="false" class="padding">
        I want the parent's height to fit the content's height
    </ion-content>
</ion-popover-view>

但是popover对于我想要显示的少数文本来说太大了:

我尝试设置离子弹出视图高度height: auto;,但在这种情况下只显示标题栏.设置一个固定高度(height: 100px;)工作(如描述在这里),但我想这取决于内容长度的动态高度.

关于CodePen的一个例子

我有一个页面组件,其中包含一个打开PopoverController的按钮.根据Ionic Docs,弹出窗口需要另一个特定的内容组件.

在主页面中,我有一个需要从弹出窗口组件调用的函数,但我还没有找到如何访问"父级"方法.我试过@ViewChild但孩子却是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 …