Angular 15中Bootstrap 5模态框内输入框自动聚焦问题求助

你的核心问题在于原指令的ngAfterViewInit在组件初始化时就执行了，此时模态框还处于隐藏状态，调用focus()不会生效；靠延长定时器时长只是碰运气，完全不可靠。因为模态框和主表单在同一组件，我们可以直接利用Bootstrap模态框的shown.bs.modal事件（模态框完全显示后触发）来精准触发聚焦，下面是两种可行方案：

方案一：优化自动聚焦指令 #

修改指令逻辑，让它监听指定模态框的显示事件，在事件触发时再执行聚焦：

import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
import { fromEvent, Subscription } from 'rxjs';

@Directive({
  selector: '[appAutoFocus]'
})
export class AutoFocusDirective implements OnInit, OnDestroy {
  @Input() appAutoFocus: string; // 传入模态框的CSS选择器，比如"#myModal"
  private modalShowSub: Subscription;

  constructor(private elRef: ElementRef) {}

  ngOnInit(): void {
    const modalEl = document.querySelector(this.appAutoFocus);
    if (modalEl) {
      // 监听模态框显示完成事件
      this.modalShowSub = fromEvent(modalEl, 'shown.bs.modal').subscribe(() => {
        this.elRef.nativeElement.focus();
      });
    }
  }

  ngOnDestroy(): void {
    // 销毁订阅避免内存泄漏
    this.modalShowSub?.unsubscribe();
  }
}

使用方式 #

在模态框内的目标输入框上添加指令，并传入模态框的选择器：

<!-- Bootstrap模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <!-- 输入框绑定指令，指定对应模态框 -->
        <input type="text" appAutoFocus="#myModal" class="form-control">
      </div>
    </div>
  </div>
</div>

方案二：组件内直接监听模态框事件 #

如果不想额外维护指令，也可以直接在组件里通过ViewChild获取输入框，监听模态框的显示事件：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  @ViewChild('modalInput') modalInput: ElementRef<HTMLInputElement>;

  ngOnInit(): void {
    const modalEl = document.getElementById('myModal');
    modalEl.addEventListener('shown.bs.modal', () => {
      this.modalInput.nativeElement.focus();
    });
  }
}

对应模板 #

给目标输入框添加模板引用变量：

<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <input #modalInput type="text" class="form-control">
      </div>
    </div>
  </div>
</div>

两种方案的核心都是利用Bootstrap的shown.bs.modal事件，这个事件会在模态框的显示动画完成、元素完全可见后触发，此时调用focus()必然生效，完全不需要依赖定时器，既可靠又高效。

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