嘿，我来帮你搞定这两个问题哈！

问题1：zIndexOffset配置未生效 #

你当前用Object.assign合并配置的方式是没问题的，但有时候zIndexOffset参数会被组件内部样式或者父容器的层级规则覆盖，试试这几个方案：

• 直接通过自定义类设置z-index：在你指定的datepickerColorTheme对应的CSS类里手动添加z-index样式，因为组件内部的样式优先级可能更高，必要时可以加!important强制覆盖（确认没有其他样式冲突再用哦）：

  .your-datepicker-theme-class {
    z-index: -3 !important;
  }
  

• 检查父容器的层级设置：如果日期选择器的父元素设置了position: relative或者自定义的z-index，那日期选择器的层级会受限于父元素，这时候要么调整父容器的层级，要么直接给日期选择器的弹出层设置独立的全局样式。
• 确认组件版本：有些旧版的ngx-bootstrap可能存在zIndexOffset的bug，升级到最新稳定版说不定能直接解决问题。

问题2：页面滚动时自动关闭日期选择器 #

要实现这个功能，我们可以监听页面滚动事件，主动关闭打开的日期选择器，步骤如下：

1. 给日期选择器添加模板引用：在HTML的bsDatepicker元素上加上模板变量，方便在组件里获取实例：

   <div class="col-sm-9"> 
     <input id="OfficialDob" placeholder="Date of Birth" class="form-control" 
            bsDatepicker #dobPicker="bsDatepicker"
            [bsConfig]="bsConfig" formControlName="OfficialDob" /> 
   </div>
   

2. 监听滚动事件并控制日期选择器状态：在组件的TypeScript代码里，监听window的滚动事件，当检测到日期选择器处于打开状态时，调用hide()方法关闭它，记得在组件销毁时移除监听避免内存泄漏：

   import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
   import { BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
   
   // 你的组件装饰器部分
   export class YourComponent implements OnInit, OnDestroy {
     @ViewChild('dobPicker') dobPicker!: BsDatepickerDirective;
     private scrollHandler: () => void;
   
     ngOnInit() {
       // 定义滚动处理函数
       this.scrollHandler = () => {
         if (this.dobPicker?.isOpen) {
           this.dobPicker.hide();
         }
       };
       // 添加滚动监听
       window.addEventListener('scroll', this.scrollHandler);
     }
   
     ngOnDestroy() {
       // 移除监听，防止内存泄漏
       window.removeEventListener('scroll', this.scrollHandler);
     }
   
     // 你的原有配置代码
     bsConfig = Object.assign({}, { 
       containerClass: this.datepickerColorTheme, 
       zIndexOffset: -3, 
       dateInputFormat: 'DD-MMM-YYYY', 
       showWeekNumbers: false 
     });
   }
   

   如果你的页面里有多个日期选择器，可以把这个滚动关闭的逻辑封装成一个Angular指令，这样就能在所有日期选择器上复用啦！

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