时间戳

首页 > 解决方案 > 订阅者在Angular中接收数据时如何关闭模式

angular - 订阅者在Angular中接收数据时如何关闭模式

问题描述

我正在使用 ngx-bootstrap 模态，我想在调用异步 REST 服务时也将其用作加载模态。所以我在调用服务之前打开它，我想在收到响应时关闭它。

示例：

this.loadingModalRef = this.modalService.show(LoadingModalComponent,{initialState, keyboard: false, backdrop: 'static' });
this.myService.searchClient(data).subscribe(
  res => {
    this.loadingModalRef.hide()
  }
);

在那种情况下，模态不会关闭，但我不明白为什么。我必须使用延迟来关闭它，以这种方式

setTimeout(() => {
  this.loadingModalRef.hide();
 }, 200);

但是，当我还想在收到响应时导航到另一个位置时，我遇到了问题。在这种情况下，模态不会关闭，不可见，但仍附加到 DOM 中的 body 元素，用户无法再与界面交互。

使用超时关闭模态是否正确？我该如何解决我的问题？

标签： angularbootstrap-modalngx-bootstrap

解决方案

当使用 setTimeoutthis上下文等于window所以你应该使用bind

setTimeout(() => {
   this.loadingModalRef.hide();
}, 200).bind(this)

在第一个代码中，这应该可以工作：

const loadingModalRef = this.modalService;
loadingModalRef.show(LoadingModalComponent,{initialState, keyboard: false, backdrop: 'static' });
this.myService.searchClient(data).subscribe(
  res => {
    loadingModalRef.hide()
  }
);

推荐阅读