这里的挑战来自这样一个事实:当使用 ngIf 有条件地显示模态时,当页面加载时,模态元素最初不存在于 DOM 中,因为默认情况下它设置为 false。因此,第一次单击时,模式不会弹出,但第二次会显示。但是,关闭模式后,该变量设置为 false,导致从 DOM 中删除模式元素,并在下次单击时再次删除没有显示。
对于后续交互,当尝试通过将变量设置为 true 再次触发模态时,模态元素不在 DOM 中,导致其无法显示。本质上,模态元素需要在触发之前动态添加到 DOM 中,并在关闭后立即删除,以确保后续交互的正确功能。这确保了模态框仅在需要时才出现在 DOM 中,并且在不再需要时被删除。
我尝试了多种方法来解决这个问题:
在
ngOnInit
方法中初始化变量并默认设置为true。然而,这对于第一次点击有效,但是当模式关闭时,该变量被设置为 false,并从 DOM 中删除。随后,当第二次单击时,模态不会出现在 DOM 中。
删除了
ngIf
条件,但遇到了数据绑定问题。
尝试使用
ngClass
代替ngIf
,但这并没有从DOM中删除模态div。
从元素中删除了模态类并使用了
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>
我想,你有点复杂化了。从我的角度来看,您所需要的只是:
// .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>