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

Question

我正在使用 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 元素，用户无法再与界面交互。

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

Answer 1

尝试将this 设置为其中。

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

就我而言，它对我有用。

另一种方法是。

import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

constructor(
    public activeModal: NgbActiveModal
) { }

然后做一个关闭模态的函数。并调用该函数。

closeModal() {
 this.activeModal.close('');
}

有关详细信息，请参阅此链接。 Link

Answer 2

当使用 setTimeout this context 等于 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()
  }
);