注销时关闭所有打开的动态对话框

Question

我正在使用 primeng 动态对话框在 component.However 中显示一些数据，如果对话框打开且会话超时，应用程序注销但对话框保持打开状态。我想关闭对话框，因为该应用程序已注销。我尝试调用 DynamicDialogRef close() 方法，但这不起作用。我该怎么做？

这就是我在注销方法中调用的内容 -

 constructor private dialogRef: DynamicDialogRef) { }

 signOut()
        {
        this.dialogRef.close();
        this.dialogRef.destroy();
  }

这就是我调用对话框的方式- 模板

   <button (click)="showDialog()"></button>

调用的方法：

showDialog() {
   
    const ref = this.dialogService.open(DetailsDialogComponent, {

      data: {
        value: 'TEST,
      },
      header: 'Details Panel",
      width: '70%',
      dismissableMask: true
    });

    
      }

Answer 1

primeng 对话框有一个 two-way 绑定 [(visible)] 属性，允许您为其设置一个布尔值。默认情况下，该值为 false。因此，当您执行某些操作（在您的情况下是注销）时，相同的 false 标志可用于关闭所有活动对话框。

在您的 HTML 模板中，执行以下操作：

<p-dialog [(visible)]="openDialog1">
...
</p-dialog>
<p-dialog [(visible)]="openDialog2">
...
</p-dialog>

在你的 ts 文件中，

signOut() {
    this.openDialog1 = false;
    this.openDialog2 = false; // set for all the dialogs that you want to close
}

更新：

如果您没有使用 p-dialog，请尝试将 [DialogService] 添加到组件的 providers 部分，如下所示，

providers: [DialogService]

关闭包含数据的动态对话框：

signOut() {
   this.dialogRef.close(data); // pass your data 
}

然后，使用onClose事件来捕捉它。希望这对您有所帮助！

Answer 2

创建自己的注入服务；

import { DynamicDialogRef, DialogService } from 'primeng/dynamicdialog';
import { Injectable } from '@angular/core';


@Injectable({
  providedIn: 'root'
})
export class DialogDynamicService {
  ref: DynamicDialogRef;
  constructor(private service: DialogService) {
  }

  open(ref, data){
     this.ref =  this.service.open(ref, {})
  }

  destroy(){
   if(this.ref){
      this.ref.destroy();
   }
  }
}

调用服务中的组件，

constructor(private dialogService: DialogDynamicService){}
    
  getDialog(){
        this.dialogService.open(DialogComponent,{});
    }

会话注销

constructor(public dialogService: DialogDynamicService) {}
signOut(){
 this.dialogService.destroy();
}

不要忘记将 DialogService 放入 app Module 或 root Module

希望这篇文章能解决您的问题。如果不评论下来。！谢谢

Answer 3

因此与 mat 对话框不同，primeng 不提供一次关闭所有对话框的方法，为此我不得不使用以下 -

 this.dialogService.dialogComponentRefMap.forEach(dialog => {
      dialog.destroy();
    });

注销时关闭所有打开的动态对话框

close all open dynamic dialogs on logout

primeng

angular