如何从 Angular 的 PrimeNG 库中为 AutoComplete 组件设置焦点

Posted 2023-03-05

【中文标题】如何从 Angular 的 PrimeNG 库中为 AutoComplete 组件设置焦点

【英文标题】：how to set focus for AutoComplete component from PrimeNG library in Angular

【发布时间】：2019-03-07 01:32:27

【问题描述】：

我正在尝试在 Dialog 元素中使用 AutoCompete 组件。当对话框打开时，我希望焦点转到 AutoComplement 元素。

我还没有找到这方面的确切教程。

我的效果是基于这个***链接： 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() 函数被正确执行。 但是，焦点未设置在自动完成元素上。

我哪里弄错了有什么建议吗？提前谢谢你。

【参考方案1】：

每个autocomplete 实例都有一个公共函数focusInput()。通过@ViewChild('autoCompleteObject')... 引用您的实例后，您可以在此引用上调用focusInput()：

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

STACKBLITZ

更新

这与primeng v1.0.xxx有关： 为了在对话框中手动控制焦点添加[focusOnShow]="false"：

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

这样，按钮不会“窃取”焦点，STACKBLITZ 更新

【讨论】：

我相信这是一个有效的解决方案，但由于某些未知原因，它仍然对我不起作用。

请更新我的或使用非工作版本创建一个新的 stackblitz，我会尽力提供帮助

stackblitz.com/edit/angular-mmce7e?file=src/app/…。添加一个按钮，焦点不再在 p-autocomplete 组件上。

这很奇怪，按钮从输入中“窃取”焦点，作为一种解决方法，您可以将focus 添加到您的按钮，如<button (focus)="onAfterShow()">test</button>。我不喜欢这种解决方法，但这是我唯一想到的。请注意，这将取消选项卡选择（在输入集中时按 TAB 选择按钮）。我更新了我的堆栈闪电战