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>

TypeScript：

  @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();
  }

当诊断对话框打开时，onAfterShow（）函数将执行而不会出现错误。但是，焦点没有设置在自动完成元素上。

任何建议我弄错了吗？预先谢谢你。

Answer 1

每个FROM microsoft/aspnetcore:2.0 AS base WORKDIR /app EXPOSE 80 FROM microsoft/aspnetcore-build:2.0 AS build WORKDIR /src COPY WebApplication7/WebApplication.csproj WebApplication/ RUN dotnet restore WebApplication/WebApplication.csproj COPY . . WORKDIR /src/WebApplication RUN dotnet build WebApplication.csproj -c Release -o /app实例都有一个公共功能focusInput()。通过autocomplete对实例的引用后，您可以在此引用上调用@ViewChild('autoCompleteObject')...：

focusInput()

STACKBLITZ

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

1 个答案: