Question

我试图在我的仪表板上显示多个不同的模态，但我注意到大多数情况下模态屏幕会打开两次。（我甚至无法一致地复制这个问题，因为有时它在我取消服务并且第一次再次运行它之后不会打开两个模态。更改后的Ng服务自动重新编译将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文件中的每个模态来修复我自己的问题：）

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

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

1 个答案: