Ionic 4 - 从 Popover 传回数据而不关闭答案

【问题标题】：Ionic 4 - Pass Data BACK from Popover without dismissingIonic 4 - 从 Popover 传回数据而不关闭
【发布时间】：2019-04-28 14:43:42
【问题描述】：

在 Ionic 4 中，我想将数据从 Popover 控制器传递到视图页面。

我能够获取数据onDismiss()，但我想在不退出弹出框的情况下这样做。

下面是我试过onDismiss()的代码sn-p，它成功了。

我们是否有任何其他可以捕获的弹出方法或状态更改

页面

async presentPopover(opts) {

    console.log(opts);
    const popover = await this.popoverController.create({
      component: RouteDetailsPopoverComponent,
      componentProps: {
        viewType: this.viewType
      },
      event: opts.event
    });

    popover.onDidDismiss()
    .then((result) => {
      console.log(result['data']);
      this.viewType = result['data'];
    });

    return await popover.present();
}

这是弹出框组件

changeRouteDetailView(mode: View) {
    this.viewType = mode;
    this.popCtrl.dismiss(this.viewType);
}

在不关闭弹出框的情况下，我可以将数据传回吗？

【问题讨论】：

标签： angular popover ionic4

【解决方案1】：

进入你调用popover组件的页面，在'create()' & 'present()'方法之后输入这个来使用popover：

const { data } = await popover.onDidDismiss();

'data'会将你从popover组件发送的值存储在你调用popover组件的页面中。

同时，在popover组件中需要将数据发送到页面。在您需要从弹出窗口返回的方法中使用此行代码：

this.popoverCtrl.dismiss({ data_you_sent });

这个method，dismiss()，返回数据（以防你发送）并关闭弹出框。

【讨论】：

他们特别要求在不关闭弹出框的情况下做到这一点。
是的，这是真的。可能最好的方法是stackoverflow.com/a/53491013/11794091 zhimin 在本主题中回答。无论如何，我认为强烈推荐使用 onDidDismiss 回调，但这取决于你需要什么......

【解决方案2】：

创建一个全局服务，并将其注入两个组件，通过服务传递数据

【讨论】：

【解决方案3】：

使用 Observable 将数据传回父级而不关闭。

在服务中

dataBS: BehaviorSubject<any> = new BehaviorSubject(null);
dataObs = this.dataBS.asObservable();

在弹出窗口中

constructor(private dataSvc: DataService){}
sendToParent(val){
  this.dataSvc.dataBS.next(val);
}

在父组件中

constructor(private dataSvc: DataService){}
listenForData(){
 this.dataSvc.dataObs.subscribe(passedVal => {
   console.log(passedVal) // THIS is your value from popover in your parent without dismiss
 })
}

ngOnInit(){
 this.listenForData();
}

【讨论】：

【解决方案4】：

this.popoverController.create({ 组件：RouteDetailsPopoverComponent，组件属性：{ someSubject: this.subject },

this.subject.subscribe(...)

在弹出窗口中：

this.someSubject.next(..);

【讨论】：

【解决方案5】：

我可以在 onDismiss() 上获取数据，但我想在不退出弹出框的情况下这样做。

下面是我尝试过 onDismiss() 的代码 sn-p 并且成功了。

我们是否有任何其他可以捕获的弹出方法或状态更改

页面我想要相同的页面，你会分享你的 src 代码吗？你能告诉我代码在哪里... changeRouteDetailView(mode: View) { this.viewType = mode; this.popCtrl.dismiss(this.viewType); }

【讨论】：

【解决方案6】：

您可以在 popOver 上使用：

this.viewCtrl.dismiss({ var1: "value" });

并且在您的页面中，您可以在 present() 之后使用 popover.onDIdDismiss() 事件来捕获从弹出窗口返回的数据。：

await popover.onDidDismiss(data => {      
  if(data!=null){         
    console.log(data);
  }
});

【讨论】：