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时上下文等于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()
  }
);

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

2 个答案: