在 Angular 應用開發中，實現用戶點擊按鈕后，原地切換顯示一個輸入框并自動獲取焦點的功能，是一個常見的交互模式。例如，搜索圖標點擊后變為搜索框，用戶可以直接輸入。然而，由于 Angular 的變更檢測和 DOM 更新機制的異步性，直接在改變顯示狀態后立即調用元素的 focus() 方法，往往會因為元素尚未完全渲染或準備就緒而失敗。

本文將探討這一問題，并介紹如何利用 ChangeDetectorRef 來更同步地更新視圖，從而實現對動態出現元素的精確聚焦。

問題再現：按鈕到輸入框的切換與聚焦

考慮以下 Angular 模板結構：

<main class="columns-content-area" *ngIf="DictManagerStack.empty() || DictManagerStack.exists('EntriesManagement')"><div class="columns-content-header"><h1 class="columns-content-title">{{ 'EntriesManagement' | translate }}</h1><button style="margin-left: auto; margin-right: 0.5rem;" *ngIf="!isClickGlassInDictManager"(click)="onDictManagerButtonClick('SearchButton', 'search')"class="normal-toolbar-button"><i class="fa-solid fa-magnifying-glass"></i></button><input #searchInput *ngIf="isClickGlassInDictManager" style="margin-left: auto; margin-right: 0.5rem; border: 1px solid #ccc; border-radius: 4px; padding: 1px;"(keyup.enter)="onDictManagerButtonClick('SearchButton', 'EnterSearch')" type="text"(keyup.esc)="onDictManagerButtonClick('SearchButton', 'cancelSearch')"(focusout)="isClickGlassInDictManager = false"[(ngModel)]="searchWordInDictManager" placeholder="搜索"/></div><p class="columns-content-description">{{ 'EntriesManagementDescription' | translate }}</p></main>

我們希望當點擊搜索按鈕時，isClickGlassInDictManager 變量變為 true，導致按鈕隱藏，輸入框顯示。同時，我們希望新出現的輸入框立即獲得焦點。

一個直觀的想法可能是在處理按鈕點擊的方法中直接改變變量并調用聚焦：

import { Component, ViewChild, ElementRef } from '@angular/core';// ... other imports@Component({ /* ... */ })
export class YourComponent {isClickGlassInDictManager = false;// 使用 @ViewChild 獲取輸入框的引用@ViewChild('searchInput') searchInputElement!: ElementRef;onDictManagerButtonClick(itemType: 'SearchButton' | 'EntriesManagementContent', item: any) {if (itemType === 'SearchButton') {this.isClickGlassInDictManager = !this.isClickGlassInDictManager;// 問題所在：此時輸入框可能還未完全呈現在 DOM 中或未準備好if (this.isClickGlassInDictManager && this.searchInputElement) {const searchInput = this.searchInputElement.nativeElement as HTMLInputElement;searchInput.focus(); // 可能失敗}}}
}

之所以會失敗，是因為 Angular 的變更檢測通常不會在你的事件處理函數執行的 同一刻 立即更新 DOM。當 isClickGlassInDictManager 的值改變時，Angular 會安排一次視圖更新，但這個更新過程可能發生在當前 JavaScript 任務完成之后。因此，在 focus() 被調用時，@ViewChild('searchInput') 對應的元素可能還不存在于 DOM 中，或者雖然存在，但瀏覽器還沒有完成其布局和渲染，導致 focus() 方法沒有效果。

解決方案：手動觸發變更檢測 cdr.detectChanges()

為了解決這個問題，我們可以利用 Angular 提供的 ChangeDetectorRef 服務來手動觸發一次變更檢測，強制 Angular 立即更新視圖，從而確保輸入框在調用 focus() 之前已經出現在 DOM 中。

以下是使用 ChangeDetectorRef 的解決方案：

import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';// ... other imports@Component({ /* ... */ })
export class YourComponent {isClickGlassInDictManager = false;@ViewChild('searchInput') searchInputElement!: ElementRef;constructor(private cdr: ChangeDetectorRef) {} // 注入 ChangeDetectorRefonDictManagerButtonClick(itemType: 'SearchButton' | 'EntriesManagementContent', item: any) {if (itemType === 'SearchButton') {// 1. 改變狀態，隱藏按鈕，準備顯示輸入框this.isClickGlassInDictManager = !this.isClickGlassInDictManager;// 2. 手動觸發變更檢測// 這會強制 Angular 立即根據 isClickGlassInDictManager 的新值更新 DOMthis.cdr.detectChanges();// 3. 在 DOM 更新后，嘗試聚焦輸入框// 此時，由于 detectChanges() 已經執行，@ViewChild 應該已經獲取到新創建的元素引用if (this.isClickGlassInDictManager && this.searchInputElement) {const searchInput = this.searchInputElement.nativeElement as HTMLInputElement;searchInput.focus(); // 現在聚焦操作應該能夠成功}}}
}

方案解釋

1. this.isClickGlassInDictManager = !this.isClickGlassInDictManager;: 這一步改變組件狀態，指示輸入框應該顯示（如果之前是隱藏的）。
2. this.cdr.detectChanges();: 這是關鍵步驟。它告訴 Angular 立即執行一次變更檢測。Angular 會檢查所有綁定，發現 isClickGlassInDictManager 的變化，并根據 *ngIf="isClickGlassInDictManager" 的條件，同步地在 DOM 中創建并插入搜索輸入框元素。
3. if (this.isClickGlassInDictManager && this.searchInputElement): 在 detectChanges() 執行后，@ViewChild('searchInput') 應該已經成功獲取到了新創建的輸入框元素的引用。這個條件確保只有當輸入框確實應該顯示且引用可用時，才執行聚焦操作。
4. searchInput.focus();: 由于 detectChanges() 已經保證了輸入框元素的存在，這里的 focus() 調用現在能夠成功地作用于實際的 DOM 元素，使其獲得焦點。

通過 cdr.detectChanges()，我們將原本可能稍后發生的 DOM 更新提前到當前方法的執行流程中，從而解決了狀態改變與 DOM 準備好進行交互之間的時序不同步問題。

總結

利用 ChangeDetectorRef 的 detectChanges() 方法，我們可以強制 Angular 立即更新視圖，確保目標元素在 DOM 中存在且可供操作，從而實現對動態出現元素的精確控制，例如自動聚焦。