打开对话框时,会多次显示
试图通过检查对话框是否已打开来防止双重打开
if (!this.dialogService.hasOpenDialog) {
return this.dialogService
.open({ viewModel: AssignTeam })
.whenClosed((response) => {
if (!response.wasCancelled) {
return this.protectionService.assignTeam(devices, response.output);
}
this.selectedDevices.splice(0);
});
}
预期:应显示一个对话框。当用户单击确定时,它应该消失实际:对话框多次打开。当用户单击确定时,他会看到相同的对话框并且必须取消它
这是打开对话框时的html:
<body class="ux-dialog-open">
<ux-dialog-overlay style="z-index: 1000;" class="active"></ux-dialog-overlay>
<ux-dialog-container style="z-index: 1000;" class="active">
<div style="margin-top: 84.5px; margin-bottom: 84.5px;">
<div>
<div class="popup">
<div class="black-bg1">
<ai-dialog class="modalpopup-container padd35 dis-block">
<ai-dialog-header>
<!-- omitted -->
</ai-dialog-header>
<ai-dialog-body>
<!-- ommited-->
</ai-dialog-body>
<ai-dialog-footer class="text-center">
<!-- ommitted-->
</ai-dialog-footer>
</ai-dialog>
</div>
</div>
</div>
</div>
</ux-dialog-container>
<ux-dialog-overlay style="z-index: 1000;" class="active"></ux-dialog-overlay>
<ux-dialog-container style="z-index: 1000;" class="active">
<div style="margin-top: 84.5px; margin-bottom: 84.5px;">
<div>
<div class="popup">
<div class="black-bg1">
<ai-dialog class="modalpopup-container padd35 dis-block">
<ai-dialog-header>
<!-- omitted-->
</ai-dialog-header>
<ai-dialog-body>
<!-- omitted-->
</ai-dialog-body>
<ai-dialog-footer class="text-center">
<!-- omitted-->
</ai-dialog-footer>
</ai-dialog>
</div>
</div>
</div>
</div>
</ux-dialog-container>
<script id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.3'><\/script>".replace("HOST",
location.hostname));
//]]>
</script>
<script async="" src="/browser-sync/browser-sync-client.js?v=2.26.3"></script>
<div aurelia-app="main" class="page_container">
<!-- omitted-->
</div>
<script src="scripts/vendor-bundle.js"></script>
<script>
requirejs.config({
skipDataMain: true
});
// Configure Bluebird Promises.
Promise.config({
longStackTraces: false,
warnings: false,
cancellation: true
});
require(['aurelia-bootstrapper']);
</script>
<div></div>
<div></div>
</body>
还尝试使用以下代码进行更多调查:
if (!this.dialogService.hasActiveDialog) {
console.log(this.dialogService);
return this.dialogService
.open({ viewModel: AssignTeam })
.then((openDialogResult: DialogOpenResult) => {
console.log(openDialogResult);
return openDialogResult.closeResult;
});
似乎分配了两个控制器