Angular 4中如何为Bootstrap模态框内的输入框设置焦点

我来帮你搞定这个头疼的聚焦问题，你遇到的这两个坑其实在Angular结合原生Bootstrap开发时挺常见的，咱们一步步拆解解决：

首先先理清楚你之前方案失效的原因：

• 用@ViewChild时元素为undefined：因为Bootstrap模态框初始是隐藏状态，Angular在组件初始化阶段不会渲染隐藏的DOM元素，你在按钮点击时直接调用focus，此时输入框还没被渲染出来，自然拿不到引用。
• jQuery的shown.bs.modal事件没效果：主要是Angular的变更检测机制在作祟，模态框显示后Angular可能还没完成DOM更新，直接调用focus会找不到目标元素。

下面给你几个可行的解决方案，按推荐程度排序：

方案一：结合Angular的ViewChild与Bootstrap模态框事件（最符合Angular最佳实践） #

这个方法避免直接操作DOM或依赖jQuery，完全贴合Angular的组件生命周期：

1. 在组件类中添加ViewChild引用和事件监听逻辑：

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

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnInit, OnDestroy {
  @ViewChild('focus') inputElement!: ElementRef;
  private modalElement: HTMLElement | null = null;
  private modalShownListener: (() => void) | null = null;

  ngOnInit() {
    // 获取模态框DOM元素
    this.modalElement = document.getElementById('myModal');
    if (this.modalElement) {
      // 监听模态框完全显示后的事件
      this.modalShownListener = () => {
        // 确保输入框元素已渲染后再执行聚焦
        if (this.inputElement?.nativeElement) {
          this.inputElement.nativeElement.focus();
        }
      };
      this.modalElement.addEventListener('shown.bs.modal', this.modalShownListener);
    }
  }

  ngOnDestroy() {
    // 组件销毁时移除事件监听，避免内存泄漏
    if (this.modalElement && this.modalShownListener) {
      this.modalElement.removeEventListener('shown.bs.modal', this.modalShownListener);
    }
  }
}

2. 你的模板中#focus的引用已经写对了，保持不变即可：

<input class="form-control" id="name" name="name" required [(ngModel)]="checkpoint.name" #focus />

方案二：修复jQuery的实现方式 #

如果你习惯用jQuery，只需调整执行时机，让Angular完成DOM更新后再聚焦：

1. 先注入NgZone（确保在Angular变更检测周期内执行）：

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

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    $('#myModal').on('shown.bs.modal', () => {
      this.ngZone.run(() => {
        $('#focus').focus();
      });
    });
  }
}

或者更简单的方式，用setTimeout让Angular完成DOM更新：

ngOnInit() {
  $('#myModal').on('shown.bs.modal', () => {
    setTimeout(() => {
      $('#focus').focus();
    }, 0);
  });
}

注意：要确保jQuery已经正确引入到你的项目中，并且加载顺序在Angular之前。

方案三：使用Angular的Renderer2（更优雅的DOM操作） #

用Renderer2来监听事件和操作DOM，完全符合Angular的设计理念：

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

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit, OnDestroy {
  @ViewChild('focus') inputElement!: ElementRef;
  private unsubscribe: (() => void) | null = null;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    const modalElement = document.getElementById('myModal');
    if (modalElement && this.inputElement) {
      // 监听模态框显示事件，并用Renderer2操作DOM
      this.unsubscribe = this.renderer.listen(modalElement, 'shown.bs.modal', () => {
        this.renderer.selectRootElement(this.inputElement.nativeElement).focus();
      });
    }
  }

  ngOnDestroy() {
    // 销毁监听
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  }
}

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