Как закрыть модал, когда подписчик получает данные в Angular - PullRequest
Новая
       60

Как закрыть модал, когда подписчик получает данные в Angular

0 голосов
/ 20 сентября 2018

Я использую модалы ngx-bootstrap, я хочу использовать его также в качестве модального режима загрузки, когда я вызываю асинхронные REST-сервисы.Поэтому я открываю его перед вызовом службы и хочу закрыть его, когда получен ответ.

Пример : 

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

В этом случае modal dont 'близко, но я не понимаю почему.Я должен использовать задержку, чтобы закрыть его, таким образом 

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

Но у меня есть проблема, когда я хочу перейти в другое место, когда ответ получен.В этом случае модальное окно не закрывается, не отображается, но все еще прикреплено к элементу body в DOM, и пользователь больше не может взаимодействовать с интерфейсом.

Правильно ли использовать тайм-аутзакрыть модал?Как я могу решить мою проблему?

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

При использовании 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()
  }
);
0 голосов
/ 20 сентября 2018

Просто попробуйте установить this в это.

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

В моем случае это работает для меня.

Другой способ сделать это.

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

constructor(
    public activeModal: NgbActiveModal
) { }

А затем сделайте функцию для закрытия модальной.И вызвать эту функцию.

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

См. Эту ссылку для получения дополнительной информации. Ссылка

...