Ngx-bootstrap 模式打开两次而不是一次

Question

我试图在仪表板上显示多个不同的模式，但我注意到大多数时候模式屏幕会打开两次。（我什至无法始终如一地复制这个问题，因为有时在我取消 ng serve 和运行之后它不会打开两个模式第一次。更改后的 Ng serve 自动重新编译将 100% 总是使这两个出现模态框）。

我在仪表板中的（点击）功能上调用模态，如下所示

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

整个服务就是这样

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

在 modalcomponent 中，我打开了两个不同的模板（一开始我在两个不同的组件中一起做了这个，然后出现了问题，我认为这可能会解决它，但没有）

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 文件中的每个模态解决了我自己的问题:)

我会留下这个问题，以防有人遇到同样的问题，因为我在发布这篇文章之前没有在其他地方找到它。

Ngx-bootstrap 模式打开两次而不是一次

Ngx-bootstrap modal opens twice instead of just once

ngx-bootstrap

ngx-bootstrap-modal