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

问题描述 投票:0回答:1

这里的挑战来自这样一个事实:当使用 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>
angular bootstrap-modal bootstrap-5 angular-ng-if
1个回答
0
投票

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

// .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>
© www.soinside.com 2019 - 2024. All rights reserved.