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不会附加到body标签。

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;
}