Angular - Ожидание, пока ngIf не будет готов избежать неопределенной ошибки для elementRef внутри него

Question

Элемент ввода не определен после inputVisibleIfThisIsTrue = true, потому что он находится внутри ngIf, я мог бы использовать задержку, но что если использовать переходы и эффекты, я не хочу беспокоиться о том, сколько времени установлено на задержку.

if (this.something) {
    this.inputVisibleIfThisIsTrue = true;
    this.input.nativeElement.focus(); // this.input is undefined because ngIf takes time
}

Так как же я могу использовать this.input.nativeElement.focus(), только когда ngIf готов? Есть ли событие, на которое может подписаться наблюдатель?

Answer 1

1. Добавьте в него переменную шаблона: <your-component-name #var>

2. Запрос этой переменной с помощью @ContentChild:

   @ContentChild('var', { read: ElementRef }) set _method(el: ElementRef) {
      // the component has been initializated, you can now access the variable el
   }
   

Разница между этим решением и AfterViewChecked заключается в том, что это решение работает также для динамически внедряемых компонентов или элементов, добавляемых во время выполнения, и вы уверены, что метод выполняется только в том случае, если этот элемент изменился

Answer 2

Судя по вашим комментариям на ответ Корфоо, я думаю, что вы делаете:

if (this.something) {
  this.inputVisibleIfThisIsTrue = true;
  if (this.input !== undefined) {
    this.input.nativeElement.focus();
  }
}

Вы можете еще больше упростить это, сделав это:

if (this.something) {
  this.inputVisibleIfThisIsTrue = true;
  this.input && this.input.nativeElement.focus();
}

Answer 3

Я бы пошел к более прямому пути с setTimeout сразу после изменения условия.

См .: https://stackblitz.com/edit/angular-epfwea

Answer 4

Вы можете использовать хук жизненного цикла AfterViewChecked от Angular для выполнения функций после полной инициализации представления. Посмотрите здесь для документации по крючку и здесь для других крючков жизненного цикла, если они вам когда-нибудь понадобятся.