ngx-bootstrap 模态删除正文滚动

Question

modalRef: BsModalRef;
config = {
  animated: true,
  class: 'forgot-modal'
};
openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
}
closeModal() {
    this.modalRef.hide();
    this.modalRef = null;
}

上面的代码打开了我的模态。但是身体有一个需要移除的卷轴。我以某种方式发现，当打开模式时，modal-open 类没有附加到正文标记。

Answer 1

试试这个解决方法，你需要在你的组件中注入 Renderer2。

modalRef: BsModalRef;
config = {
  animated: true,
  class: 'forgot-modal'
};
openModal(template: TemplateRef<any>) {
   const onShown: Subscription = this.modalService.onShow.subscribe(() => {      
   setTimeout(() => {
    renderer.addClass(document.body, 'modal-open')
   }, 100);
   onShown.unsubscribe();
   const onHidden: Subscription = this.modalService.onHidden.subscribe(() => {
    renderer.removeClass(document.body, 'modal-open');
    onHidden.unsubscribe();
   });
  });
  this.modalRef = this.modalService.show(template, this.config);
}
closeModal() {
    this.modalRef.hide();
    this.modalRef = null;
}