6

我正在使用 angular 4 和 ngx-bootstrap 来打开模态。一切运行良好，我通过一个组件实现了模态。我还可以通过content. bsModalRef像这样：

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

这一切都很好，然后我的模态可以访问一个名为somedata. 极好的。我遇到的问题是我想对somedata. 假设somedata是一个带有数量的产品列表，我希望模态将数量减少到一个值。我怎么知道模态类中的数据何时可用？我可以使用setTimeouthack，它有效，但让我内心感到恶心。ngOnChanges是否有某种类似这样的生命周期钩子ngx-bootstrap实现，所以我可以知道何时设置数据属性，以及何时更改？

4

3 回答 3

5

您可以实现 setter 或方法

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

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

于 2017-09-01T12:50:35.070 回答
3

更好的方法是使用initialState和传递你需要的东西

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

确保你有一个products数组MyComponent

export MyComponent {
    public products: any[];
}

@Edit：至于版本 2.0.3，这种方式不起作用，不应使用（即使在文档中提到）。请参考这个问题，直到进一步注意到。

于 2018-02-27T16:50:58.357 回答
0

在父组件上

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'
}
于 2017-12-30T16:15:37.440 回答