是否可以使用 ngIf 条件在 Angular 中显示 Bootstrap 5 模式弹出窗口？

Question

这里的挑战来自这样一个事实：当使用 ngIf 有条件地显示模态时，当页面加载时，模态元素最初不存在于 DOM 中，因为默认情况下它设置为 false。因此，第一次单击时，模式不会弹出，但第二次会显示。但是，关闭模式后，该变量设置为 false，导致从 DOM 中删除模式元素，并在下次单击时再次删除没有显示。

对于后续交互，当尝试通过将变量设置为 true 再次触发模态时，模态元素不在 DOM 中，导致其无法显示。本质上，模态元素需要在触发之前动态添加到 DOM 中，并在关闭后立即删除，以确保后续交互的正确功能。这确保了模态框仅在需要时才出现在 DOM 中，并且在不再需要时被删除。

我尝试了多种方法来解决这个问题：

1. 在

   ngOnInit

   方法中初始化变量并默认设置为true。然而，这对于第一次点击有效，但是当模式关闭时，该变量被设置为 false，并从 DOM 中删除。随后，当第二次单击时，模态不会出现在 DOM 中。

2. 删除了

   ngIf

   条件，但遇到了数据绑定问题。

3. 尝试使用

   ngClass

   代替

   ngIf

   ，但这并没有从DOM中删除模态div。

4. 从元素中删除了模态类并使用了

   ngIf

   ，这有效，但元素不再表现为模态。

尽管尝试了这些不同的方法，但没有一个完全解决该问题。

下面是TS文件

    constructor(private modalService: DatasetModalService, private alertService: AlertService) {

    }

    showConfirmationModal(message: string, parentRefObj: any) {
        this.parentRefObj = parentRefObj;
        this.showConfirmationWindow = true;
        this.message = message;
        console.log(this.message, "message.");
        
        setTimeout(() => this.visibleAnimate = true, 100);

        document.getElementById("showConfirmationModal").click();
    }

    confirmation(value: boolean) {
        this.hideConfirmationModal();
        this.parentRefObj.confirmation(value);
    }


    hideConfirmationModal() {
        this.visibleAnimate = false;
        setTimeout(() => this.showConfirmationWindow = false, 200);
        document.getElementById("closeConfirmationModal").click();
    }

以下是 HTML 文件

<div (click)="onContainerClicked($event)" *ngIf="showConfirmationWindow" keyboard="true" class="modal fade" id="confirmationModal" role="dialog">
    <div class="modal-dialog modal-lg">

        <div class="modal-content">
            <div class="modal-header itemodelheading">
                <h4 class="modal-title" align="center">
                    <strong><span translate>confirmationModal.title.confirmation</span></strong>
                </h4>

                <button type="button" id="closeConfirmationModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="textCenter" align="center">
                    <span class="glyphicon glyphicon-warning-sign"></span> <span translate>{{message}}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<button type="button" hidden="true" class="btn btn-primary" data-bs-toggle="modal" id="showConfirmationModal" data-bs-target="#confirmationModal">
    Launch confirmation modal
  </button>

Answer 1

我想，你有点复杂化了。从我的角度来看，您所需要的只是：

// .ts
...

showModal = false;

onClickButton(): void {
  this.showModal = true;
}

closeModal(): void {
  this.showModal = false;
}

...

// .html

<div *ngIf="showModal" class="modal-dialog modal-lg">
  ...
  <button (click)="closeModal()">Confirm</button>
</div>