Невозможно программно установить фокус на поле ввода в Angular
Я пытаюсь следовать предложение и установил маркер для элемента управления вводом в моем компоненте, как это.
<span (click) = "onEditClick()"
[class.hidden] = "editing">{{value}}</span>
<input #input
value = "{{value}}"
[class.hidden] = "!editing">
Я заметил, что щелчок по диапазону скрывает его и представляет ввод но, требуется дополнительный щелчок, чтобы сделать элемент управления вводом фактически сфокусированным для редактирования. Я попытался сфокусировать его следующим образом.
@ViewChild("input") input: ElementRef;
onEditClick() {
this.editing = true;
this.input.nativeElement.focus();
}
Это не работает, поэтому я проверил, что собственный элемент установлен и соответствует тому, что я ожидаю. Так и было. А так как в консоли ошибок нет, то я немного запутался не зная как дальше диагностировать.
Я подозреваю, что мне не хватает чего-то довольно простого, что можно легко вывести из предоставленного описания.
Ответы 1
Проблема в том, что элемент ввода по-прежнему скрыт, когда вы пытаетесь установить на него фокус. Чтобы убедиться, что элемент ввода стал видимым после установки свойства editing, принудительно определите изменения, вызвав ChangeDetectorRef.detectChanges():
onEditClick() {
this.editing = true;
this.changeDetectorRef.detectChanges();
this.input.nativeElement.focus();
}
См. этот стекблиц для демонстрации.
Я не думаю, что есть лучший способ, потому что фокус нельзя установить через привязку данных. Единственная известная мне альтернатива — установить фокус асинхронно (например, с помощью setTimeout).
Спасибо за последний ответ. Это и принято, и +1, как и должно быть. Интересно, есть ли у вас время взглянуть на аналогичный вопрос, но в отношении случая изменения свойства, вызванного извне компонента. Если нет, я все еще благодарен за этот ответ.
Это работает, так что зеленая галочка сразу. Я также хотел бы знать, есть ли лучший подход ко всей концепции, устраняющий потенциальный недостаток в моем дизайне. Причина, по которой я задаюсь вопросом, заключается в том, что кажется, что для обнаружения изменений требуется толчок (согласно вашему предложению), и обычно такие вещи «просто работают», когда остальная часть программного обеспечения настроена правильно. Или это просто один из таких случаев?