Модал Ngx-bootstrap открывается дважды, а не один раз

Question

Я пытаюсь отобразить несколько разных модалов на своей панели, но я заметил, что в большинстве случаев модальный экран открывается дважды. (Я даже не в состоянии повторить эту проблему последовательно, так как иногда она НЕ открывает два модала после того, как я отменяю ng serve и запускаю его снова в первый раз. Ng serve с автоматической перекомпиляцией после изменений на 100% всегда вызывает появление двух модалов).

Я вызываю модальную функцию (щелчок) в моей панели, которая выглядит следующим образом

openConfigureModal(soort: string){
this.dashboardService.openConfigureModal.next(soort);

Весь сервис просто это

  @Injectable()
  export class DashboardService {
  constructor() { }
  openConfigureModal = new Subject();
} 

В модальном компоненте я открываю два разных шаблона (сначала я сделал это в двух разных компонентах, затем возникла проблема, и я подумал, что, возможно, это решит проблему, но это не так)

export class ConfigureAppModalComponent implements OnInit {

  constructor(private dashboardService: DashboardService, private modalService: BsModalService) { }

  modalRef: BsModalRef;
  @ViewChild("templateConfigure") template;
  @ViewChild("templateSync") template2;

  ngOnInit() {
    const config = {
      class: 'modal-dialog-centered modal-lg',
    };

    const config2 = {
      class: 'modal-dialog-centered roundedborder modal-sm',
    };

    this.dashboardService.openConfigureModal.subscribe( data => {
      if(data == "google"){
        //set some values
        this.modalRef = this.modalService.show(this.template, config);
      }else if(data == "outlook"){
        //set some values
        this.modalRef = this.modalService.show(this.template, config);
      }else{
        this.modalRef = this.modalService.show(this.template2, config2);
      }
    })
  }

Шаблоны просто выглядят так

<ng-template #templateConfigure>
  <div class="modal-header">
    sth here
  </div>
  <div class="modal-body">
    sth here
  </div>
</ng-template>


<ng-template #templateSync>
  <div class="modal-header">
    sth else here
  </div>
  <div class="modal-body">
    sth else here
  </div>        
</ng-template>

Я также показываю компонент только один раз в моем dashboard.component.html, как это

<app-configureappmodal></app-configureappmodal>

Ngx-bootstrap версия 2.0.2 Bootstrap версия 4.0.0

Любые другие вещи не ясно, не стесняйтесь спрашивать. Спасибо за чтение!

Answer 1

Исправил мою собственную проблему, просто используя takeUntils и OnDestroy и должным образом уничтожая каждый модал в соответствующих им файлах.ts:)

Я оставлю вопрос на тот случай, если кто-нибудь столкнется с той же проблемой, потому что я не нашел ее нигде, прежде чем опубликовал это.

Answer 2

Модальная служба удалит подписку, которая должна быть удалена при удалении компонента из DOM.

На верхнем уровне вашего компонента вы можете создать подписку.

      private subscription = new Subscription();

Теперь вы можете собирать подписку, сгенерированную при вызове openConfigurationModal.

      const modalSubscription = this.dashboardService.openConfigureModal.subscribe( data => { });
this.subscription.add(modalSubscription);

В onDestroy() вы можете избавиться от этой подписки.

      public ngOnDestroy() {
    this.subscription.unsubscribe();
}

Надеюсь, поможет :)