具有正确样式类的 NgBootstrap 模态

Question

我在 Angular 中使用NgBootstrap来创建模态。在 HTML 中，我有以下模板。

<div class="modal fade" role="dialog" tabindex="-1" id="add-item-modal">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header wo-modal_update-address-header">
<div class="d-flex align-items-center justify-content-center">
<img class="wo-modal_update-address-icon" src="assets/img/add.svg">
<h4 class="modal-title">Create Release</h4>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div>
<form>

现在我使用<ngtemplate>如下：

<ng-template #release let-modal>
<div id="add-item-modal">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header wo-modal_update-address-header">
<div class="d-flex align-items-center justify-content-center">
<img class="wo-modal_update-address-icon" src="assets/images/add.svg">
<h4 class="modal-title">Create Release</h4>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div>

模态出现，但类modal-xl未正确添加，因此，模态的大小似乎很小。我已经检查了NgBootstrap的一些实现，对于它们，modal-content是在<ngtemplate>之后添加的。但是在这种情况下，如何正确添加类？

Answer 1

当您打开 pop 时，您可以在选项中指示大小，请参阅有关打开的文档

this.modalService.open(MyComponent, 
{ scrollable: true, 
size: 'lg' })