Angular页面加载时为动态渲染的主/嵌套组件输入框设置焦点

针对你遇到的动态渲染、跨组件输入框的聚焦需求，这里提供两种经过优化的可行方案：

方案一：自定义指令 + 共享服务（推荐跨组件场景） #

利用服务统一触发聚焦信号，指令监听信号并完成聚焦逻辑，适配动态渲染和嵌套组件场景。

1. 实现聚焦共享服务 #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FocusService {
  private focusTrigger$ = new BehaviorSubject<boolean>(false);
  private hasFocused = false;

  // 触发聚焦流程，重置已聚焦标记
  triggerFocus() {
    this.hasFocused = false;
    this.focusTrigger$.next(true);
  }

  // 标记已有输入框完成聚焦
  markFocused() {
    this.hasFocused = true;
  }

  // 暴露监听信号
  get focusTrigger() {
    return this.focusTrigger$.asObservable();
  }

  get isFocused() {
    return this.hasFocused;
  }
}

2. 实现自动聚焦指令 #

给所有需要参与聚焦的输入框添加该指令，指令会自动监听服务信号，判断自身可见性后完成聚焦：

import { Directive, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { FocusService } from './focus.service';
import { Subscription } from 'rxjs';

@Directive({ selector: '[appAutoFocus]' })
export class AutoFocusDirective implements OnInit, OnDestroy {
  private sub!: Subscription;

  constructor(private el: ElementRef, private focusService: FocusService) {}

  ngOnInit() {
    this.sub = this.focusService.focusTrigger.subscribe(trigger => {
      if (trigger && !this.focusService.isFocused) {
        // 检查当前输入框是否处于可见状态（适配ngIf等动态渲染逻辑）
        const isVisible = this.el.nativeElement.offsetParent !== null;
        if (isVisible) {
          this.el.nativeElement.focus();
          this.focusService.markFocused();
        }
      }
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

3. 在主组件中触发聚焦流程 #

在组件生命周期钩子中（比如AfterViewChecked）调用服务的触发方法，确保动态渲染完成后执行：

import { Component, AfterViewChecked, OnInit } from '@angular/core';
import { FocusService } from './focus.service';

@Component({
  selector: 'app-root',
  template: `
    <input *ngIf="showInput1" appAutoFocus type="text" placeholder="主组件输入框1">
    <app-child-component *ngIf="showChild"></app-child-component>
  `
})
export class AppComponent implements OnInit, AfterViewChecked {
  showInput1 = true;
  showChild = true;
  private hasTriggered = false;

  constructor(private focusService: FocusService) {}

  ngOnInit() {
    // 模拟异步数据加载完成后渲染输入框的场景
    setTimeout(() => {
      this.showInput1 = true;
      this.showChild = true;
      this.hasTriggered = false; // 重置标记，确保聚焦流程能重新触发
    }, 1000);
  }

  ngAfterViewChecked() {
    if (!this.hasTriggered) {
      this.focusService.triggerFocus();
      this.hasTriggered = true;
    }
  }
}

4. 嵌套组件使用示例 #

子组件中的输入框只需添加指令即可参与全局聚焦流程：

import { Component } from '@angular/core';

@Component({
  selector: 'app-child-component',
  template: `<input *ngIf="showChildInput" appAutoFocus type="text" placeholder="子组件输入框">`
})
export class ChildComponent {
  showChildInput = true;
}

方案二：ViewChildren + 遍历查询（适合组件结构可控场景） #

如果输入框集中在当前组件及嵌套子组件内，可以通过@ViewChildren查询所有输入框，遍历找到第一个可见的完成聚焦：

import { Component, AfterViewChecked, ViewChildren, ElementRef, QueryList } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input *ngIf="showInput1" #input type="text" placeholder="主组件输入框1">
    <app-child-component *ngIf="showChild"></app-child-component>
  `
})
export class AppComponent implements AfterViewChecked {
  showInput1 = true;
  showChild = true;
  private hasFocused = false;

  // 查询当前组件及所有子组件中带有#input标记的元素
  @ViewChildren('input', { descendants: true }) inputs!: QueryList<ElementRef<HTMLInputElement>>;

  ngAfterViewChecked() {
    if (!this.hasFocused) {
      // 找到第一个可见的输入框
      const visibleInput = this.inputs.find(input => {
        return input.nativeElement.offsetParent !== null;
      });
      if (visibleInput) {
        visibleInput.nativeElement.focus();
        this.hasFocused = true;
      }
    }
  }
}

子组件中的输入框需要添加模板引用标记#input：

@Component({
  selector: 'app-child-component',
  template: `<input *ngIf="showChildInput" #input type="text" placeholder="子组件输入框">`
})
export class ChildComponent {
  showChildInput = true;
}

方案选型建议 #

• 跨组件、动态渲染逻辑复杂时，优先选方案一，通过服务统一管理聚焦状态，扩展性更强。
• 组件结构简单、输入框集中时，可以用方案二，无需额外引入服务，实现更轻便。

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