使用 ngx-bootstrap 将任何组件传递给我的模态

Question

我想制作一个动态的模态弹出窗口，为此我需要内容是一个可以变化的组件。

目前在我的modal.component.html我有这个：

<div class="modal-container">
  <div class="modal-backdrop">
  </div>
  <div class="modal-card">
    <div class="modal-header">
      <a></a>
    </div>
    <div>
      <div #componentPlaceHolder></div>
    </div>
  </div>
</div>

在我的modal.component.ts中：

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
})
export class ModalCComponent implements OnInit{

  @ViewChild('componentPlaceholder', { read: ViewContainerRef }) componentPlaceholder: ViewContainerRef;

  constructor(private modalService: BsModalService) {}

  ngOnInit() {
  }

}

我想创建一个包含一个名为的方法的服务，例如 showModal () 并且根据调用它的位置，在模态中显示一个或另一个组件，但我没有设法做到这一点。 我尝试做BsModalService a.show （ ModalCComponent ），但我不知道如何在 `#componentPlaceHolder. 如何显示将参数传递给 showModal 方法的特定组件？

Answer 1

您尝试做的事情可以通过使用两个组件（或服务和组件）来完成。

1. 调用 modalService 来打开一个保存显示内容的 modal 的组件/服务（modal 组件）
2. 内部具有实际模态模板的组件

调用 modalService 以使用组件作为内容打开模式的组件示例

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit{

  constructor(private modalService: BsModalService) {}

  ngOnInit() {
    // This has an optional second argument which can pass extra data
    this.modalService.show(ModalComponent);
  }

}

实际文档中的更多信息： https://valor-software.com/ngx-bootstrap/#/modals#service-component