Ionic-同时显示同一组件的不同实例上的弹出窗口

Question

我需要针对同一页面中页面组件的多个实例同时显示一个弹出窗口，如警报或弹出窗口，如下图所示。

如何做到这一点呢？有合适的离子成分吗？

Answer 1

您可以使用Modal Controller实现此目的。这里有一些提示：

import { ModalController, NavParams } from 'ionic-angular';

@Component(...)
class HomePage {

 constructor(public modalCtrl: ModalController) {

 }

 presentProfileModal() {
   let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
   profileModal.present();
 }

}

@Component(...)
class Profile {

 constructor(params: NavParams) {
   console.log('UserId', params.get('userId'));
 }

}

在profile-page.scss文件中：

page-profile {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: rgba(217, 222, 230, 0.74);
  ion-content {
    background-color: transparent !important;
  }
  .scroll-content {
        display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
  }
}