如何在primeng对话框中将焦点设置在关闭按钮上

Question

primeng 对话框打开后如何在关闭按钮上设置焦点？ 我尝试过这样的事情，但它不起作用。 HTML：

<p-dialog
  [modal]="true"
  [resizable]="true"
  [draggable]="false"
  header="header"
  [(visible)]="dialogVisible"
  (onHide)="closeDialog()"
  (onShow)="openDialog()"
  focusOnShow="false"
>

ts：

constructor(private element: ElementRef<HTMLAnchorElement>) {}
openDialog() {
    this.element.nativeElement.focus();
  }

更新： 我找到了如何将焦点放在这个元素上的解决方案

openDialog() {
    const element = this.elem.nativeElement.querySelectorAll('.ui-dialog-titlebar-close').item(0);
    element.focus();
console.log(document.activeElement)
  }

但它不粘。当我在 openDialog 中检查焦点时，它已设置，但之后仍设置为另一个按钮。

Answer 1

我认为您可以使用 Renderer2 来访问该元素。像这样的：

const element = this.renderer.selectRootElement('#elementId');

然后：element.focus();

我想你可以参考here 以获得更好的理解。