Угловой - Фокус на элементе ввода, который имеет ngIf

Question

У меня есть два элемента ввода, которые отображаются в условиях *ngIf.

<input type="text" id="textInput" *ngIf="showTextInput">
<input type="number" id="numericInput" *ngIf="showNumericInput">

<button (click)="editButtonClicked($event)">

Нажатие на кнопку должно установить фокус на соответствующий элемент ввода.

editButtonClicked(event) {
  // Focus on either #textInput or #numericInput element
}

I 'мы изучили ElementRef , чтобы задать теги html-элементов ввода, например #textInput, а затем определить их в классе, например:

@ViewChild('textInput') textInput: ElementRef;

... но, по-видимому, это не работаетэлементы, которые имеют *ngIf условия.

Как мне сфокусироваться на элементе ввода, нажав кнопку?

Answer 1

Вы также можете сделать это по ссылочной переменной шаблона, если это то, что вы ищете

в html

<input #text type="text" id="textInput">
<input #number type="number" id="numericInput">

<button (click)="editButtonClicked($event, text, number)"> Click </button>

в ts

editButtonClicked(e, text, number){
    if(text.value) {
      text.focus()
    } else {
      number.focus()
    }
  }

Answer 2

Да @ViewChild не будет работать для элементов, которые находятся под контролем структурной директивы.Вы можете применить два обходных пути:

1. Удалите директиву *ngIf и скройте элемент с помощью CSS style: 'display:none'.

2. Выбратьэлемент из DOM, используя ванильный Javascript document.getElementById('someId');, а затем сфокусировать элемент.

Я предпочту пункт 1.