将承诺转换为可观察

Question

尝试将 swal 的第一个 promise 函数转换为可观察函数并尝试使用取消操作。有人可以帮我语法吗？

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, cancel!',
  confirmButtonClass: 'btn btn-success',
  cancelButtonClass: 'btn btn-danger',
  buttonsStyling: false
}).then(function () {
  swal(
    'Deleted!',
    'Your file has been deleted.',
    'success'
  )
}, function (dismiss) {
  // dismiss can be 'cancel', 'overlay',
  // 'close', and 'timer'
  if (dismiss === 'cancel') {
    swal(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})

到目前为止，我有以下内容：

export class DialogService {
    confirm(title: string, message: string):Observable<any> {
        return Observable.fromPromise(swal({
            title: title,
            text: message,
            type: 'warning',
            showCancelButton: true
        }));
    }; }

如何在上面添加function (dismiss)函数？

Answer 1

我不确定swal是否使用本机Promise api，我认为它使用 JavaScript 的承诺库，如 q 或其他东西。

export class DialogService {
    confirm(title: string, message: string):Observable<any> {
       return Observable.create( (observer: any) => {
                 swal({
                   title: title,
                   text: message,
                   type: 'warning',
                   showCancelButton: true
                 }).then((data)=>{
                    observer.next(data);
                 },(reason)=>{
                    observer.error(reason);
                 })
            })
     }
}

Answer 2

一旦你订阅了可观察量，你就可以从承诺传递"捕获"案例。

const subscription = Observable.fromPromise(...).subscribe(
  function () {
    console.log('Deleted!');
   },
  function (dismiss) {
    console.log('Dismiss', dismiss);
  })

请注意，这仅在是有效的承诺/A+ 规范时才有效。

更多信息在这里： https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/frompromise.md

Answer 3

Nvm，我最终得到了以下内容,..

    return Observable.create((observer) => {
        if (component.isUntouched()) {
            observer.next(true);
        } else {
            swal({
                title: 'Sure?',
                text: 'Not saved, are you sure?',
                type: 'warning',
                showCancelButton: true
            }).then(() => {
                observer.next(true);
            }, () => {
                observer.next(false);
            })
        }
    });

为了完整起见，component.isUntouched()定义如下：

@ViewChild('appForm') appForm: NgForm;
... 
isFormTouched():boolean{
    return this.eventForm.dirty;
}

在模板/html 中：

<form class="form form-horizontal" (ngSubmit)="submitEvent()" #appForm="ngForm">
  ..
</form>

Answer 4

嗨，

您可以简单地将其包装在 from 运算符周围，该运算符可用于将承诺转换为可观察量！

例

from(
  Swal.fire({
    icon: 'warning',
    title: 'Would you like to delete this card?',
    showConfirmButton: true,
    showDenyButton: true,
    allowOutsideClick: false,
    denyButtonText: 'Cancel',
  })
).subscribe(result => {
  if (result.isConfirmed) {
  //  do what you like here
  }
});