使用Angular与PrimeNg时手动聚焦输入框失效，问题出在哪？

算力阿峰

2026-6-26

解决Angular+PrimeNg中点击「Other」单选框自动聚焦输入框的问题

你遇到的问题核心是PrimeNg单选按钮的事件触发时机和DOM更新顺序导致直接调用focus()无效，试试下面的方案：

步骤1：绑定正确的组件事件

别用原生click事件，改用PrimeNg p-radioButton自带的onChange事件——这个事件是在组件内部状态更新完成后触发的，能避免DOM未就绪的问题。

模板代码示例：

<p-radioButton name="options" value="other" label="Other" (onChange)="focusOtherInput()"></p-radioButton>
<input #otherInput type="text" placeholder="请输入其他内容">

步骤2：异步执行聚焦操作

即便拿到了输入框的引用，直接同步调用focus()可能会被PrimeNg后续的DOM操作覆盖。用setTimeout把聚焦操作放到下一个宏任务队列，确保PrimeNg的内部处理完成后再执行：

组件代码示例：

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RadioButtonModule],
  template: `
    <p-radioButton name="options" value="option1" label="选项1"></p-radioButton>
    <p-radioButton name="options" value="option2" label="选项2"></p-radioButton>
    <p-radioButton name="options" value="other" label="Other" (onChange)="focusOtherInput()"></p-radioButton>
    <input #otherInput type="text" placeholder="请输入其他内容">
  `
})
export class AppComponent {
  @ViewChild('otherInput') otherInput!: ElementRef<HTMLInputElement>;

  focusOtherInput() {
    // 延迟执行避开PrimeNg的焦点抢占
    setTimeout(() => {
      this.otherInput.nativeElement.focus();
    }, 0);
  }
}