初始化组件后如何使用Angular将焦点设置在离子按钮上答案

【问题标题】：How to set focus on ion-button with Angular after component is initialized初始化组件后如何使用Angular将焦点设置在离子按钮上
【发布时间】：2021-06-02 21:06:10
【问题描述】：

我试图在组件初始化后将焦点设置在离子按钮上。在组件初始化后，我设法将注意力集中在输入字段上，而不是离子按钮上。

角度组件：

这个方法在 ngOninit() 生命周期方法中被调用。

  private _setFocusDefault(): void {
    setTimeout(() => {
      const element = document.getElementById("buttonback");

      if (element) {
        if (element !== document.activeElement) {
          const activeEl: any = document.activeElement;
          activeEl.blur();
          element.focus();
        } else {
          element.focus();
        }
      }
    }, 2000);
  }

视图（需要焦点的按钮）：

 <ion-buttons slot="start">
      <ion-button id="buttonback" expand="block" class="bodybutton backbutton" (click)="cancel()">
          <ion-icon id="iconButtonBack" class="iconButtonBack" name="arrow-back" attr.aria-label="{{ constants.BACK_TO_PREV_SCREEN }}"></ion-icon>
      </ion-button>
 </ion-buttons>

有人知道为什么我不能将焦点设置在离子按钮上吗？谢谢。

【问题讨论】：

标签： html angular typescript ionic-framework

【解决方案1】：

通过在 ion-button 元素上使用 tabindex="0" 找到了修复方法。

 <ion-buttons slot="start">
      <ion-button tabindex="0" id="buttonback" expand="block" class="bodybutton backbutton" (click)="cancel()">
          <ion-icon id="iconButtonBack" class="iconButtonBack" name="arrow-back" attr.aria-label="{{ constants.BACK_TO_PREV_SCREEN }}"></ion-icon>
      </ion-button>
 </ion-buttons>

来源：https://github.com/ionic-team/ionic-framework/issues/21439

【讨论】：