ngx-bootstrap模态框：移除body滚动条及modal-open类未添加问题

我之前也碰到过一模一样的问题！当用ng-bootstrap的模态框组件时，明明写了打开关闭的逻辑，但页面背景的滚动条还在，排查后发现body标签没自动加上modal-open类——这个类是ng-bootstrap用来禁用页面滚动的关键。下面给你几个实用的解决办法：

1. 手动在模态框的打开/关闭方法中添加/移除类 #

最直接的方式就是在控制模态框的方法里，手动操作body的类。推荐用Angular的Renderer2来做DOM操作，比直接用document.body更符合框架最佳实践：

import { Component, TemplateRef, Renderer2 } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

// ... 你的组件其他代码 ...

constructor(private modalService: BsModalService, private renderer: Renderer2) {}

modalRef: BsModalRef; 
config = { animated: true, class: 'forgot-modal' }; 

openModal(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template, this.config);
  // 给body添加modal-open类
  this.renderer.addClass(document.body, 'modal-open');
}

closeModal() {
  this.modalRef.hide();
  // 移除body上的modal-open类
  this.renderer.removeClass(document.body, 'modal-open');
  this.modalRef = null;
}

2. 监听模态框的显示/隐藏事件来操作类 #

有时候模态框的显示是异步的，直接在openModal里加类可能时机不对，这时候可以监听模态框的shown和hidden事件，确保在正确的时机修改body类：

openModal(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template, this.config);
  
  // 模态框完全显示后添加类
  this.modalRef.shown.subscribe(() => {
    this.renderer.addClass(document.body, 'modal-open');
  });
  
  // 模态框完全隐藏后移除类
  this.modalRef.hidden.subscribe(() => {
    this.renderer.removeClass(document.body, 'modal-open');
    this.modalRef = null;
  });
}

3. 检查ng-bootstrap的配置与版本 #

如果上面的方法都没用，可能是你的ng-bootstrap初始化有问题：

• 确保在你的根模块（比如AppModule）中正确导入了NgbModule（Angular 9+）或者NgbModule.forRoot()（Angular 8及以下）
• 检查你的ng-bootstrap版本是否和Angular版本兼容，版本不匹配也可能导致自动添加类的逻辑失效

4. 强制覆盖body的滚动样式 #

如果手动添加modal-open类后还是有滚动条，可能是你的自定义CSS覆盖了默认样式，可以手动写一个高优先级的样式：

body.modal-open {
  overflow: hidden !important;
}

这样就能确保模态框打开时，页面背景完全无法滚动啦！

内容的提问来源于stack exchange，提问作者Krishna