具有正确样式的 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>

模态出现了，但是 class modal-xl 没有正确添加，因此模态看起来很小。我已经检查了 NgBootstrap 的一些实现，对于它们，modal-content 是在 <ngtemplate> 之后添加的。但是在那种情况下如何正确添加 classes 呢？

Answer 1

当你打开弹窗时，你在选项中指定的大小，请参阅docs about open

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