Angular中如何传递条件渲染DOM元素的引用至按键事件方法？

问题背景 #

实现Enter/方向键的焦点切换逻辑时，目标元素#city仅在acceptCity()返回true时才会被渲染到DOM中，导致无法提前将其引用传递给按键事件处理方法，焦点切换失效。

可行解决方案 #

方案一：通过ViewChild动态获取元素引用 #

利用Angular的ViewChild装饰器，在组件类中动态获取元素引用，无需在模板中直接传递。

修改组件类代码：

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

// ...

@ViewChild('city', { static: false }) private cityElement!: ElementRef;
@ViewChild('mobileNoInput', { static: false }) private mobileNoInputElement!: ElementRef;

onEnterKeyPress(event: KeyboardEvent): void {
    if (event.key === 'Enter' || event.key === 'ArrowDown') {
        event.preventDefault();
        // 优先聚焦已渲染的city元素，否则直接跳转到mobileNoInput
        if (this.acceptCity() && this.cityElement) {
            this.cityElement.nativeElement.focus();
        } else {
            this.mobileNoInputElement.nativeElement.focus();
        }
    } else if (event.key === 'ArrowUp' || event.key === 'Backspace') {
        event.preventDefault();
        // 保留原有的上移焦点逻辑
        // this.focusPreviousVisibleElement1(对应元素);
    }
}

// 可保留原有的焦点方法
focusPreviousVisibleElement1(previousElement: HTMLElement): void {
    previousElement.focus();
}

修改模板代码（移除事件中的元素引用传递）：

<div class="mb-3">
    <label for="City" class="form-label">Add City</label>
    <select
        #selectValue
        formControlName="selectOption"
        (keydown)="onEnterKeyPress($event)"
        id="city"
    >
        <option value="Y">Y</option>
        <option value="N">N</option>
    </select>
</div>

<div class="mb-3" *ngIf="acceptCity()">
    <label for="city" class="form-label">City</label>
    <ng-select
        class="form-control"
        #city
        formControlName="city"
        [items]="cities"
    >
    </ng-select>
</div>

方案二：模板中直接使用条件判断传递引用 #

利用Angular模板表达式特性，在事件绑定中直接根据acceptCity()的结果决定传递的元素引用，无需修改过多TS代码。

修改模板中的select元素：

<select
    #selectValue
    formControlName="selectOption"
    (keydown)="onEnterKeyPress1($event, acceptCity() ? city : mobileNoInput, mobileNoInput)"
    id="city"
>
    <option value="Y">Y</option>
    <option value="N">N</option>
</select>

此方案可直接复用原有的onEnterKeyPress1方法，当acceptCity()为true时传递city引用，否则传递mobileNoInput，自动适配元素的渲染状态。

方案三：DOM查询兜底（不推荐） #

如果上述方案不适用，可通过原生DOM查询动态获取元素，但此方式不符合Angular的组件化思想，仅作为兜底方案。

修改组件类的焦点方法：

focusNextVisibleElement1(): void {
    let targetElement: HTMLElement | null;
    if (this.acceptCity()) {
        targetElement = document.querySelector('#city-select'); // 给ng-select设置唯一id
    } else {
        targetElement = document.querySelector('#mobile-no-input');
    }
    if (targetElement) {
        targetElement.focus();
    }
}

给模板中的元素添加id：

<ng-select
    class="form-control"
    #city
    id="city-select"
    formControlName="city"
    [items]="cities"
>
</ng-select>

方案推荐 #

优先选择方案一，它完全遵循Angular的组件化设计理念，通过ViewChild安全地获取元素引用；如果需要最小化代码改动，方案二是更简洁的选择；方案三仅在特殊场景下使用。

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