jquery: доступ к элементу внутри угловой директивы * ngIf

Question

Я хочу получить доступ к элементу ввода, используя jquery, скрытый внутри директивы * ngIf. Для простого примера:

...
export class ViewChannelScheduleComponent implements OnInit {

   someFunction() {
   ...
      doSomething($('#my-input'));
   ...
   }
}
...

<!-- and finally -->
<input id='my-input' />

Это прекрасно работает, пока я не решил скрыть компонент, используя * ngIf. Как то так ..

...    
export class ViewChannelScheduleComponent implements OnInit {

   isInputVisible = false;

   ngOnInit() {
      this.isInputVisible = true;
      doSomething($('#my-input')); //unable to catch element
   }

}
...

<!-- and finally -->
<button (click)="showInputBox()">Enable</button>
<input *ngIf="isInputVisible" class='date-time-picker' />

Я понял, что сразу после установки значения isInputVisible jquery не может получить элемент. Я проверил вещь быстрым взломом:

showInputBox() {
   this.isInputVisible = true;
   setTimeout(doSomething($('#my-input')), 100); //this works
}

Есть ли какой-нибудь изящный способ попросить jquery подождать, пока элемент станет видимым, и обратный вызов?

Или как-нибудь ссылаться на элемент ввода напрямую в angular и конвертировать его в объект jquery внутри функции?

Answer 1

Давайте проигнорируем ту часть, где вы используете jquery внутри angular и используете ID для ссылки на элемент;) в любом случае, во втором примере кода вы используете ngOnInit. В этом хуке пока нет доступных элементов шаблона. Для этого вам нужно перейти на ngAfterViewInit крючок.

Но вы не можете просто изменить свойство представления внутри этого хука, это даст предупреждение об изменении выражения.

Если вы просто хотите использовать его в showInputBox, вы можете использовать ChangeDetectorRef:

constructor(readonly cd: ChangeDetectorRef) {}

showInputBox() {
   this.isInputVisible = true;
   this.cd.detectChanges();
   doSomething($('#my-input');
}

Или просто используйте setTimeout, как вы уже сделали, но затем без 100 мс:

showInputBox() {
   this.isInputVisible = true;
   setTimeout(() => doSomething($('#my-input'));
}

Это обеспечивает переход к следующему циклу обнаружения изменений