Закрыть все открытые динамические диалоги при выходе из системы
Я использую динамический диалог Primeng для отображения некоторых данных в компоненте. Однако, если диалог открыт и время сеанса истекает, приложение выходит из системы, но диалоговое окно остается открытым. Я хочу закрыть диалоговое окно, так как приложение вышло из системы. Я попытался вызвать метод 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
});
}
вы можете создать в stackblitz.com для проблемы?
@AngelaAmarapala Я добавил больше деталей.
Ответы 3
Диалог primeng имеет свойство двусторонней привязки [(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, чтобы поймать его. Надеюсь это поможет!
Я не использую p-dialog, так как хочу показать динамический контент в своем диалоге. Следовательно, я использую службу диалога, чтобы открыть свой компонент.
@piqueblinders вы добавили [DialogService] в раздел providers вашего компонента? Пожалуйста, обратитесь к обновленному ответу для получения дополнительной информации.
Да, я добавил его в раздел поставщика моего компонента.
Кроме того, когда вы передаете данные в диалоговое окно, вы также должны передавать данные при закрытии диалогового окна. Кажется, что ваше закрытое событие пусто
Мне не нужно, чтобы данные передавались при инициировании события закрытия, поэтому я их не передавал. Также вы, вероятно, имеете в виду инициирование события закрытия из динамического диалогового окна, я хочу закрыть его из другого компонента.
Создать собственный сервис для закачки;
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
Надеюсь, этот решит вашу проблему. если не комментарий вниз.! благодарю вас
Таким образом, в отличие от матового диалога, Primeng не предоставляет метод закрытия всех диалогов одновременно, для этого мне пришлось использовать следующее:
this.dialogService.dialogComponentRefMap.forEach(dialog => {
dialog.destroy();
});
Можете ли вы опубликовать шаблон HTML, который вы используете для отображения диалогового окна Primeng?