使用 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.show (ModalCComponent(，但我不知道如何在 '#componentPlaceHolder 中显示自定义组件。 如何显示将参数传递给 showModal 方法的特定组件？

Answer 1

您尝试执行的操作可以通过使用两个组件(或服务和组件(来完成。

1. 调用模态服务的组件/服务以打开模式 保存显示内容(模式组件(
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