ngx-bootstrap模态框 - 通过bsModalRef.content访问传递到模态框中的数据

Question

我正在使用Angular 4和ngx-bootstrap打开模态框。一切顺利，我通过组件实现了模态框。我也可以通过bsModalRef的content属性将数据传递到模态框中。代码如下:

this.bsModalRef = this.modalService.open(MyComponent);
this.bsModalRef.content.somedata = [...some array of products];

这一切都很好，我的模态框可以访问一个叫做“somedata”的属性。太棒了。我遇到的问题是，我想对“somedata”执行一些计算。假设“somedata”是一个带有金额的产品列表，并且我想要将模态框中的金额减少到一个单一的值。如何知道模态框类中何时可用该数据？我可以使用setTimeout方法，但这让我感觉不舒服。是否有一种像“ngOnChanges”这样的生命周期钩子，由ngx-bootstrap实现，以便我可以知道何时设置数据属性，进一步地，什么时候更改？

- Greg

---

嗨，Greg，我正在尝试使用你之前尝试过的方法将数据传递给ngx-bootstrap模态框，但对我来说它没有起作用。你能告诉我ngx-bootstrap的版本吗？ - manojadams

Answer 1

您可以实现setter或方法。

public set somedata(val) {
    // here you process data
}

请记住，this.bsModalRef.content包含对话框组件（在您的情况下为MyComponent）的所有公共成员。

- Vasiliy Mazhekin

Answer 2

更好的方法是使用initialState并传递所需内容。

this.bsModalRef = this.modalService.open(MyComponent, {
 initialState: {
     products: [...some array of products]
 }
});

请确保在 MyComponent 中有一个名为 products 的数组。

export MyComponent {
    public products: any[];
}

@编辑：针对版本2.0.3，这种方式不起作用，不应使用（即使在文档中提到）。请参考此问题，直到进一步通知。

- Pian0_M4n

---

如果您使用模态选项并将数组放在initialState而不是products中，则此解决方案将起作用。 - Matthew S.

Answer 3

在父组件上

import { Modal, BSModalContext } from 'ngx-modialog/plugins/bootstrap';
import { overlayConfigFactory } from 'ngx-modialog';

var dataObject = {data1: "ba vbal", data2 :"bla bla"};
this.modal.open(urmodalCpmponent, overlayConfigFactory({data: dataObject}, BSModalContext))

关于模态组件

import { DialogRef } from 'ngx-modialog';

constructor(public dialogRef: DialogRef){
let context:any = dialogRef.context;
this.detail = context.data'
}

- Miguel Peguero