Как получить услугу подтверждения ожидания одобрения или отказа пользователя?

Как я могу заставить службу подтверждения 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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
2 421
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вы можете создать службу в качестве уровня над службой подтверждения 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" }
      ];
    }
  }

}


демо стекблиц 🚀

Довольно умное решение. Спасибо

Mario 10.12.2020 22:55

Другие вопросы по теме