Question

“异步：错误” 已从Chrome浏览器中删除。

因此，当页面为关闭。无论如何，我尝试过使用可观察到的方法，但是它似乎没有调用我的API，并且系统关闭了。

您也不能使用：

this.bookOutService.DeletebookOuts().subscribe(()=>{return true;});

因为这是Observable<boolean> | boolean。

@HostListener('window:beforeunload')
  canDeactivate(): Observable<boolean> | boolean {

$.ajax({
      type: 'DELETE',
      async: false,
      url: '/api/bookoutAPI/DeleteBookOuts',
    });

    return true;

    //return new Observable<boolean>((observer) => {
    //  debugger;
    //  this.bookOutService.DeletebookOuts().map(() => {
    //    observer.next(true);
    //    observer.complete();
    //  }).take(1);
    //});
  }

Answer 1

编程中的一个普遍问题是，当您等待其他事情发生时该怎么办。这在JavaScript中经常发生，无论是用户输入还是从外部API请求操作。 Javascript通过使某些异步的东西来解决这个问题。强制某些事物同步是没有太多理由的（换句话说，要等到事物完成之后再继续）。在javascript领域尤其如此，就好像您在强迫线程等待xhr的完成一样，您的UI可能会锁定等。

我建议使此功能异步是最好的主意。

我不确定jQuery ajax API，但删除异步false可能就足够了。还有其他一些问题。

可观察对象：

RXJS与回调或Promise的“普通” javascript异步模式不同。使用Observables，您可以定义一组动作。然后，当您订阅它时，它将执行这些操作。这太简单了。有关更多详细信息，我建议使用https://www.learnrxjs.io/concepts/rxjs-primer.html和整个网站。我比文档本身更喜欢它。因此，在您的示例中，您仅定义了一组要发生的事情，您没有订阅可观察的消息，因此实际上什么也没有发生。

HostListener：

HostListener是target.addEventListener(eventType, callback)的语法糖。在您的情况下，目标是window，eventType是'beforeunload'，回调是在API上调用'/ api / bookoutAPI / DeleteBookOuts'的东西。它不需要的是任何返回值。它也可以像您希望的那样异步。由于HostListeners不在乎返回值，因此建议您删除它的打字稿定义（即删除canDeactivate（）和{之间的所有内容。如果您希望始终指定一个返回类型，则可以使用void。

2种可能的解决方案：

@HostListener('window:beforeunload')
canDeactivate() {
  $.ajax({
    type: 'DELETE',
    url: '/api/bookoutAPI/DeleteBookOuts',
  });
}

或

@HostListener('window:beforeunload')
canDeactivate() {
  this.bookOutService.DeletebookOuts().pipe(take(1)).subscribe(
    () => console.log('Success'), //Handle Success
    error => console.log(error) //Handle Error
  );
}

需要注意的是从两者中都删除了返回类型。在第一个异步操作中消失了，在第二个异步操作中消失了（我也使用了较新的管道运算符，而不是方法链接）。

还值得注意的是，根据DeletebookOuts的实现，您可能不需要take（1），我假设它是用来避免手动退订的。与该线程的主题有些偏离，不过请参见Is it necessary to unsubscribe from observables created by Http methods?，以获取更多有关此信息，或者google rxjs内存泄漏。

angular 2+ canDeactivate异步：false

1 个答案: