сделать ввод в фокусе в угловых 2/5

Question

Элемент ввода будет показан после щелчка (OnViewInit скрыт).Мне нужно, чтобы этот вход был в фокусе, когда он появится.Он отлично работает, когда ввод НЕ скрыт * ngIf (# inputElement2).

Возможно ли реализовать его для # inputElement1?

HTML:

<div class="container" *ngIf="isVisible">
  <input #inputElement1 placeholder="input element 1"/>
</div>


<input #inputElement2 placeholder="input element 2"/>

<div>
  <button (click)="toggleInput();">focus</button>
</div>

TS:

  isVisible = false ;
  @ViewChild("inputElement1") inputEl: ElementRef;
  @ViewChild("inputElement2") inputEl2: ElementRef;

  toggleInput() {
    this.isVisible = !this.isVisible;
    if(this.inputEl){
      this.inputEl.nativeElement.focus();
    }
    this.inputEl2.nativeElement.focus()
  }

Answer 1

Проблема в , когда вы вызываете событие фокуса.Поскольку вы используете nativeElement (небезопасный и ненадежный способ), код не работает должным образом.

Чтобы заставить его работать так, вы можете изменить его на что-то вроде:

  toggleInput() {
    this.isVisible = !this.isVisible;
  }

  ngAfterViewChecked() {
    if (this.isVisible) {
      this.inputEl.nativeElement.focus();
    } else {
      this.inputEl2.nativeElement.focus()
    }
  }

Вам нужно будет реализовать AfterViewChecked ловушку жизненного цикла, т.е.

export class MypComponent implements AfterViewChecked

Answer 2

toggleInput() {
    this.isVisible = !this.isVisible;
   setTimeout(()=> {
            if(this.inputEl){
              this.inputEl.nativeElement.focus();
            }
            this.inputEl2.nativeElement.focus();
    })
  }