嘿，这个场景我太熟悉了——模态弹出来后用户还能Tab到背景的下载链接，不小心按Enter就触发下载，确实挺闹心的。针对你用的ngx-bootstrap V2.4和Angular CLI 1.6，给你两个实用的解决方案：

方案一：动态修改背景元素的tabindex属性（最直接） #

这个思路是利用ngx-bootstrap模态的onShown和onHidden事件，在模态显示时把背景所有可聚焦元素的tabindex设为-1（禁用Tab聚焦），关闭时再恢复原值。

步骤1：模板中绑定模态事件 #

在你的模态组件模板里，给模态添加显示和隐藏的事件绑定：

<bs-modal #myModal (onShown)="disableBackgroundTabs()" (onHidden)="enableBackgroundTabs()">
  <!-- 这里放你的模态内容 -->
  <div class="modal-header">
    <h4 class="modal-title">模态标题</h4>
    <button type="button" class="close" (click)="myModal.hide()">×</button>
  </div>
  <div class="modal-body">
    模态内容...
  </div>
</bs-modal>

步骤2：组件类中实现处理方法 #

在组件的TypeScript代码里，编写两个方法来切换背景元素的聚焦状态：

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('myModal') modal: any;

  constructor(private el: ElementRef) {}

  // 模态显示时禁用背景元素的Tab聚焦
  disableBackgroundTabs() {
    // 筛选出背景中所有可聚焦元素，排除模态自身的内容
    const focusableElements = this.el.nativeElement.querySelectorAll(
      `:not(bs-modal, .modal-content, .modal-content *) a[href], 
       :not(bs-modal, .modal-content, .modal-content *) button, 
       :not(bs-modal, .modal-content, .modal-content *) input, 
       :not(bs-modal, .modal-content, .modal-content *) select, 
       :not(bs-modal, .modal-content, .modal-content *) textarea, 
       :not(bs-modal, .modal-content, .modal-content *) [tabindex]:not([tabindex="-1"])`
    );

    // 保存原tabindex值，然后设置为-1禁用聚焦
    focusableElements.forEach((element: HTMLElement) => {
      element.dataset.originalTabindex = element.getAttribute('tabindex') || '';
      element.setAttribute('tabindex', '-1');
    });
  }

  // 模态关闭时恢复背景元素的Tab聚焦
  enableBackgroundTabs() {
    // 找到之前保存过原tabindex的元素
    const focusableElements = this.el.nativeElement.querySelectorAll('[data-original-tabindex]');

    // 恢复原来的tabindex设置
    focusableElements.forEach((element: HTMLElement) => {
      const originalTabindex = element.dataset.originalTabindex;
      if (originalTabindex === '') {
        element.removeAttribute('tabindex');
      } else {
        element.setAttribute('tabindex', originalTabindex);
      }
      // 清理临时保存的属性
      delete element.dataset.originalTabindex;
    });
  }
}

这个方案的好处是精准控制背景元素，不会影响模态内部的正常Tab导航，而且完全适配你用的旧版本。

方案二：添加全屏不可聚焦覆盖层（备选） #

如果觉得修改tabindex太麻烦，也可以在模态显示时给背景加一个全屏的透明覆盖层，设置tabindex="0"来捕获Tab焦点，不过要注意覆盖层的z-index要比背景内容高、比模态低：

<div #backdropOverlay class="backdrop-overlay" *ngIf="isModalShown" tabindex="0"></div>

对应的CSS：

.backdrop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999; /* 确保在背景之上，模态之下（模态默认z-index是1050） */
  background: transparent;
  outline: none;
}

然后在onShown和onHidden事件中控制isModalShown变量的真假即可。不过这个方案可能会有一些边缘情况（比如覆盖层没完全挡住某些元素），所以还是方案一更稳妥。

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