如何從 Angular 的 PrimeNG 庫中為 AutoComplete 組件設置焦點

Question

我正在嘗試在 Dialog 元素中使用 AutoCompete 組件。 當 Diaglog 打開時，我希望焦點轉到 AutoComplement 元素。

我還沒有找到這方面的確切教程。

我的效果是基於這個stackoverflow鏈接： How to use Angular4 to set focus by element id

這個 Github 問題： https : //github.com/primefaces/primeng/issues/2029雖然我不明白像 onAfterShow 事件這樣的部分，但該線程中的一些人嘗試過但不起作用。

我的代碼是這樣的（簡化）：

成分

<p-dialog [(visible)]="this.display" modal="true"(onShow)="this.onAfterShow($event)">
  <p-autoComplete  #autoCompleteObject>
  </p-autoComplete>
  <some-other-components>
<p-dialog>

打字稿：

  @ViewChild('autoCompleteObject') private autoCompleteObject: AutoComplete ;
  onAfterShow(event){   this.autoCompleteObject.domHandler.findSingle(this.autoCompleteObject.el.nativeElement, 'input').focus();
  }

或者像這樣：

@ViewChild('autoCompleteObject', {read: ElementRef}) private autoCompleteObject: ElementRef ;
  onAfterShow(event){
    console.log("diaglog shows");
    this.autoCompleteObject.nativeElement.focus();
  }

當diaglog 打開時， onAfterShow() 函數執行沒有錯誤。 但是，焦點未設置在自動完成元素上。

我哪里出錯了有什么建議嗎？ 先感謝您。

Answer 1

每個autocomplete實例都有一個公共函數focusInput() 。 一旦你通過@ViewChild('autoCompleteObject')...引用了你的實例，你可以在這個引用上調用focusInput() ：

onAfterShow(event) {
  this.autoCompleteObject.focusInput();
}

閃電戰

更新

這與primeng v1.0.xxx有關：為了在對話框中手動控制焦點添加[focusOnShow]="false" ：

<p-dialog header="Title" 
          [focusOnShow]="false" 
          [(visible)]="display" 
          modal="true" 
          (onShow)="onAfterShow()">
   ...
</p-dialog>

這樣，按鈕不會“竊取”焦點，STACKBLITZ 更新