Как я могу заставить службу подтверждения primng вести себя так же, как и собственное подтверждение браузера?
Когда пользователь нажимает кнопку, мне нужно при определенных условиях запросить их подтверждение для продолжения, в случае отказа выйти из метода.
Ниже приведен пример использования службы подтверждения Primeng. Проблема в том, что последняя строка метода, вызывающего openFile, выполняется, не дожидаясь одобрения пользователя.
confirm(): void {
if (this.condition) {
this.confirmationService.confirm({
message: 'Are you sure that you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => {
this.openFile();
this.messageService.add({
severity: 'info',
summary: 'Confirmed',
detail: 'You have accepted'
});
return;
},
reject: () => {
return;
}
});
}
this.openFile();
}
С другой стороны, реализуя ту же логику, используя собственное подтверждение браузера. Он работает так, как ожидалось, так что в надлежащем состоянии он будет ждать подтверждения пользователя.
confirm1(): void {
if (this.condition) {
const result = confirm('Are you sure that you want to proceed?');
if (result) {
this.openFile();
return;
} else {
return;
}
}
this.openFile();
}
Метод openFile
имеет простой журнал консоли
openFile(): void {
console.info('Some file');
}
Как получить услугу подтверждения ожидания одобрения или отказа пользователя?
Вы можете взаимодействовать с примером поведения, описанного в этом репозитории https://github.com/ilmoralito/sample-primeng-confirmation-service-vs-native-confirmation
вы можете создать службу в качестве уровня над службой подтверждения Primeng, а затем использовать обещание в качестве возвращаемого типа пользовательского метода подтверждения, который вызывает службу подтверждения Primeng, обещание разрешается как истинное для принятия и ложное в случае отклонения.
подтвердить услугу
@Injectable({
providedIn: "root"
})
export class ConfirmService {
constructor(private confirmationService: ConfirmationService) {}
confirm({
message = "Are you sure that you want to proceed?",
header = "Confirmation",
icon = "pi pi-exclamation-triangle"
} = {}): Promise<boolean> {
return new Promise(resolve => {
console.info(
this.confirmationService.confirm({
message,
header,
icon,
accept: () => {
resolve(true);
},
reject: () => {
resolve(false);
}
})
);
});
}
}
мы можем использовать async/await, потому что метод подтверждения возвращает обещание
export class AppComponent {
msgs: Message[] = [];
constructor(private confirmService: ConfirmService) {}
async confirm() {
if (await this.confirmService.confirm())
this.msgs = [
{ severity: "info", summary: "Confirmed", detail: "You have accepted" }
];
else {
this.msgs = [
{ severity: "info", summary: "Rejected", detail: "You have rejected" }
];
}
}
}
Довольно умное решение. Спасибо