Angular中无法遍历ElementRef列表添加事件监听问题

核心原因分析 #

如果你的输入框是动态渲染的（比如通过*ngIf控制显隐、*ngFor批量生成），ngAfterViewInit执行时这些元素还未被创建，此时QueryList会呈现为空；但后续元素渲染完成后QueryList会自动更新，而你的监听绑定逻辑只执行了一次，导致新生成的元素没绑定事件。

方案1：监听QueryList变化，动态绑定/解绑事件 #

修改TypeScript代码，监听QueryList的changes事件，确保每次元素更新都重新处理监听：

@ViewChildren('text_input') textInputs!: QueryList<ElementRef>;
// 定义事件处理函数变量，用于后续移除监听
private focusHandler!: () => void;
private focusOutHandler!: () => void;

ngAfterViewInit(): void {
    this.bindInputListeners();
    // 监听元素集合变化，重新绑定监听
    this.textInputs.changes.subscribe(() => {
        this.bindInputListeners();
    });
}

private bindInputListeners() {
    // 先移除旧监听，避免重复绑定导致多次触发
    this.textInputs.forEach(input => {
        const inputElement = input.nativeElement;
        inputElement.removeEventListener('focus', this.focusHandler);
        inputElement.removeEventListener('focusout', this.focusOutHandler);
    });

    // 绑定新的监听逻辑
    this.textInputs.forEach(input => {
        const inputElement = input.nativeElement;
        const parentNode = inputElement.parentNode;
        
        this.focusHandler = () => {
            parentNode.classList.add('user-input-active');
        };
        this.focusOutHandler = () => {
            if (inputElement.value === '') {
                parentNode.classList.remove('user-input-active');
            }
        };

        inputElement.addEventListener('focus', this.focusHandler);
        inputElement.addEventListener('focusout', this.focusOutHandler);
    });
}

方案2：改用Angular模板事件绑定（更推荐） #

直接在模板中绑定focus和focusout事件，无需操作DOM，完全符合Angular的组件化思路：

修改HTML代码：

<div class="user-input send-message" [formGroup]="userInputForm" (ngSubmit)="onSendMessage()">
    <div class="user-input-box" #inputBox>
        <label for="message">Send message</label>
        <input 
            id="message" 
            class="form-control" 
            type="text" 
            name="message" 
            formControlName="message" 
            (keyup.enter)="onSendMessage()"
            (focus)="inputBox.classList.add('user-input-active')"
            (focusout)="$event.target.value === '' && inputBox.classList.remove('user-input-active')"
        >
        <button class="submit-btn" type="submit" value="" (click)="onSendMessage()">
            <svg width="32" height="32" viewBox="0 0 24 24">
                <path
                    d="m3.4 20.4l17.45-7.48a1 1 0 0 0 0-1.84L3.4 3.6a.993.993 0 0 0-1.39.91L2 9.12c0 .5.37.93.87.99L17 12L2.87 13.88c-.5.07-.87.5-.87 1l.01 4.61c0 .71.73 1.2 1.39.91z"/>
            </svg>
        </button>
    </div>
</div>

这种方式无需在TS中处理DOM元素，也不会出现QueryList为空的问题，代码更简洁易维护。

额外排查点 #

1. 确认模板中所有需要绑定的输入框都添加了#text_input模板引用变量
2. 如果输入框是静态渲染的（无动态逻辑），检查组件是否启用ChangeDetectionStrategy.OnPush策略，若有需要手动触发变更检测

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