如何通过键盘箭头键让ng-template模态框获取焦点？

我通过指令和服务实现了按下箭头键切换焦点的功能，该功能在所有页面均正常工作，但在ng-template模态框中无法获取焦点，且findIndex返回值为-1。此前的解决方案在其他场景均有效，唯独模态框场景失效，恳请提供解决思路。

模态框代码 #

<ng-template #content let-modal>
  <div class="modal-header">
    <h3 class="modal-title">Accept Offer</h3>
  </div>
  <div class="modal-body">
    <p>Do you really want to accept the offer?</p>
  </div>
  <div class="modal-footer">
    <button type="submit" class="btn btn-primary tab" (click)="onAcceptOffer()" arrow-div>Submit</button>
    <button type="button" class="btn btn-secondary tab" (click)="modal.dismiss('Crossclick'); isClicked=false" arrow-div>Cancel</button>
  </div>
</ng-template>

• 动态渲染时机问题：模态框属于动态渲染内容，指令可能在模态框元素未挂载到DOM时就完成了元素收集。需在模态框打开后重新执行元素检索逻辑，比如在modal.open()的回调函数中，或者在模态框组件的AfterViewInit钩子中触发扫描。
• DOM上下文范围问题：多数模态框会被插入到body下的独立容器中，而非当前组件DOM树内。若服务仅扫描组件内部DOM，会遗漏模态框内的元素。修改服务的元素选择逻辑，改为全局检索（如document.querySelectorAll('[arrow-div]')），或限定在模态框的DOM节点范围内进行检索。
• 指令初始化问题：ng-template中的元素在模态框未打开时不会被渲染，对应指令也不会初始化。可在模态框打开后手动触发指令的初始化逻辑，或给模态框内的按钮添加独立的焦点切换处理逻辑。
• 索引匹配问题：findIndex返回-1说明当前焦点元素不在收集的元素列表中。需确认元素收集时机是否在模态框渲染完成后，同时打印收集到的元素列表，检查是否包含模态框内的按钮，排除元素选择器未覆盖模态框元素的情况。

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