1

我试图在我的仪表板上显示多个不同的模式，但我注意到大多数时候模式屏幕会打开两次。（我什至无法始终如一地复制这个问题，因为有时在我取消 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 引导版本 4.0.0

其他不清楚的可以追问。感谢您的阅读！

4

1 回答 1

0

通过简单地使用 takeUntils 和 OnDestroy 并正确销毁它们各自的 .ts 文件中的每个模态来解决我自己的问题 :)

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

于 2018-03-15T14:58:57.993 回答