使用 ngx-bootstrap modal 将数据传递给 modal答案

【问题标题】：Pass data to modal using ngx-bootstrap modal使用 ngx-bootstrap modal 将数据传递给 modal
【发布时间】：2020-07-04 13:15:29
【问题描述】：

我正在使用 Angular 8 和 ngx-boostrap 打开模态并将数据从父级传递到模态。但没有按预期工作。我应该怎么做才能让它工作？.. 这是我的 stackblitz 演示和代码

HTML

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
 
<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    Just a modal with a {{initialState.data1}}
  </div>
</ng-template>

组件

openModal(template: TemplateRef<any>) {
    const initialState = {
    data1 : 'foo'
}
    this.modalRef = this.modalService.show(template, {initialState});
  }

【问题讨论】：

我认为它不起作用，因为您没有单独的模态组件，它只是一个静态视图。为了能够传递属性，它必须是它自己的独立组件
oo..我明白了..我会改变它..谢谢..

标签： angular typescript ngx-bootstrap

【解决方案1】：

你可以这样使用它

HTML

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal for data : {{ modalService.config.initialState.data1 }}</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is a modal.
  </div>
</ng-template>

组件

openModal(template: TemplateRef<any>) {
    const user = {
        data1 : 'foo'
      };
    this.modalRef = this.modalService.show(template, {
      initialState : user
    });
  }

还有这个在线DEMO

【讨论】：