如何获得primeng的确认服务等待用户的认可或拒绝？

Question

如何使 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.log('Some file');
}

如何获取primeng的确认服务等待用户的认可或拒绝？

您可以与此存储库中描述的行为示例进行交互 https://github.com/ilmoralito/sample-primeng-confirmation-service-vs-native-confirmation

Answer 1

您可以在 primeng 确认服务之上创建一个服务，然后使用承诺作为调用 primeng 确认服务的 return 类型的自定义确认方法，承诺在接受时解析为真，在拒绝时解析为假.

确认服务

@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.log(
        this.confirmationService.confirm({
          message,
          header,
          icon,
          accept: () => {
            resolve(true);
          },
          reject: () => {
            resolve(false);
          }
        })
      );
    });
  }
}

我们可以使用 async/await 因为 confirm 方法 return promise

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" }
      ];
    }
  }

}

stackblitz demo

如何获得primeng的确认服务等待用户的认可或拒绝？

How to get the confirmation service of primeng wait for the approval or denial of the user?

javascript

primeng

angular

angular10