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

正如您所看到的，如果我打算集中输入，我将使用 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);
  }

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

A setTimeout()值为 0（或无值，默认为 0）应该可以工作。你只需要在 Angular 有机会更新之后设置焦点hidden适当的价值。

请注意，之后setTimeout()回调函数执行完毕，更改检测将再次运行（因为 Angular 猴子补丁了所有setTimeout()在 Angular 区域中进行的调用）。由于我们在异步回调函数中唯一要更改的是焦点，因此我们可以提高效率并在 Angular 区域之外运行回调函数，以避免额外的更改检测周期：

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

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

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