Question

我正在使用角度4和ngx-bootstrap来打开模态。一切都运行良好，我通过组件实现模态。我还可以通过content的{{1}}属性将数据传递到模态中。像这样：

bsModalRef

这一切都很好，然后我的模态可以访问名为this.bsModalRef = this.modalService.open(MyComponent); this.bsModalRef.content.somedata = [...some array of products];的属性。太棒了。我遇到的问题是我想在somedata上执行一些计算。假设somedata是具有金额的产品列表，我希望模态将金额减少到单个值。我如何知道模态类中何时可以获得该数据？我可以使用somedata hack，它有效，但让我内心感到icky。是否存在setTimeout实现的ngOnChanges之类的生命周期钩子，这样我就可以知道数据属性何时被设置，何时更改？

Answer 1

您可以实施setter或方法

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

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

Answer 2

更好的方法是使用initialState并传递您需要的内容

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

确保products

中有MyComponent数组

export MyComponent {
    public products: any[];
}

@Edit：对于版本2.0.3，这种方式不正在工作，不应该使用（即使在文档中引用）。请进一步注意 this issue。

Answer 3

在父组件

上

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="student">
  <thead>
    <tr>
      <th>col 1
      </th>
      <th>col 2
      </th>
      <th>col 3
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>data 1
      </td>
      <td>data 2
      </td>
      <td>data 3
      </td>
    </tr>
    <tr>
      <td>data 1
      </td>
      <td>data 2
      </td>
      <td>data 3
      </td>
    </tr>
    <tr>
      <td>data 1
      </td>
      <td>data 2
      </td>
      <td>data 3
      </td>
    </tr>
  </tbody>
</table>

<table class="teacher">
  <thead>
    <tr>
      <th>col 1
      </th>
      <th>col 2
      </th>
      <th>col 3
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>data 1
      </td>
      <td>data 2
      </td>
      <td>data 3
      </td>
    </tr>
    <tr>
      <td>data 1
      </td>
      <td>data 2
      </td>
      <td>data 3
      </td>
    </tr>
    <tr>
      <td>data 1
      </td>
      <td>data 2
      </td>
      <td>data 3
      </td>
    </tr>
  </tbody>
</table>

on Modal Component

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))

ngx-bootstrap modal - 通过bsModalRef.content访问传入modal的数据

3 个答案: