如果我不使用超时,Angular 2焦点不起作用

Question

正如你可以看到我正在使用setTimeout,如果我打算集中我的输入.如果我删除setTimeout焦点不起作用.

  <div [hidden]="searchInputHidden">
        <input (blur)="hideInput()" #term (keyup)="search(term.value)" type="text" class="inp_top" name="product_name" id="product_name" />
  </div>  


private showSearchInput(term) {
    this.searchInputHidden = false;
    setTimeout(function(){
      term.focus();
    }, 100);
  }

Answer 1

超时是必需的,因为您不能focus()保留仍然隐藏的元素.直到角度变化检测有机会运行(方法后,这将是showSearchInput()执行完毕)时,hidden在DOM属性将不会更新,即使你设置searchInputHidden到false你的方法.

阿setTimeout()为0的值(或者没有值,缺省值为0)应该工作.您只需在Angular有机会更新hidden属性值后设置焦点.

请注意,在setTimeout()回调函数完成执行后,更改检测将再次运行(因为Angular monkey-patches会setTimeout()调用在Angular区域中进行的所有调用).由于我们在异步回调函数中唯一改变的是焦点,我们可以更高效并在Angular区域外运行我们的回调函数,以避免额外的更改检测周期:

private showSearchInput(term) {
  this.searchInputHidden = false;
  this._ngZone.runOutsideAngular(() => { 
    setTimeout(() => term.focus());
  });
}

请注意,您必须将NgZone注入构造函数中才能使上述代码正常工作:

export class YourComponent {
   constructor(private _ngZone: NgZone) {}