ngx-bootstrap模态的单实例问题

Question

我从 ngx-bootstrap modal 开发了三个不同的组件 1.模态 2.iFrame 模态 3.Alertbox 模态

我只是在这些组件中传递模板，然后他们渲染它。

但是当我在一个模板中使用任意两个时，问题就来了。哪个共享相同的实例。因此，当我隐藏一个模态时，其他隐藏的模态输出也会触发。

我认为这是由于相同的 BsModalService 服务利用率。那么有什么解决办法吗？

<app-new-modal (hidden)="onModalHidden()">
<div heading>Heading</div>
</app-new-modal>
<app-iframe-modal #iframe (hidden)="onIframeHidden()">
<div heading>Heading</div>
</app-iframe-modal>

Answer 1

尝试针对该特定组件实例化服务。由于您正在订阅模态关闭并发出事件，因此这似乎会调用所有场景，而不管该特定组件如何。希望这会有所帮助:)

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css'],
  providers: [BsModalService]
})

---------------------------------------------------------

@Component({
  selector: 'app-alertbox',
  templateUrl: './alertbox.component.html',
  styleUrls: ['./alertbox.component.css'],
  providers: [BsModalService]
})

ngx-bootstrap模态的单实例问题

Single instance problem of ngx-bootstrap modal

modal-dialog

bootstrap-modal

ngx-modal

ngx-bootstrap

angular