如何在 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();

我想你可以參考這里以獲得更好的理解。