时间戳

首页 > 解决方案 > 如何聚焦具有 ngif 的 TextArea

angular - 如何聚焦具有 ngif 的 TextArea

问题描述

我有以下 Angular 2 组件，我需要在它变得可见时立即聚焦textareawith id ( )bannernoteisEditEnabled

<div class="cont-notesbanner">
  <p class="triangle"></p>
  <h3 class="tit-notesbanner">Add notes:</h3>

  <form (ngSubmit)="onSubmit(f)" #f="ngForm">
    <p
      class="p-notesbanner"
      *ngIf="!isEditEnabled"
      [ngClass]="currentAsset.notes.length === 0 ? 'it-place' : ''"
    >
      {{ currentAsset.notes.length === 0 ? "Add notes" : currentAsset.notes }}
    </p>
    <textarea 
      rows="4"
      cols="50"
      *ngIf="isEditEnabled"
      class="txt-notesbanner"
      name="bannernote"
      id="bannernote"
      rows="10"
      [(ngModel)]="currentAsset.notes"
      #bannernote
      onload="$('#bannernote').focus();"
    ></textarea>

    <div class="txt-right">
      <a class="smallButton" (click)="onCloseBannernotes()">Cancel</a>
      <a
        class="smallButton"
        (click)="onEditBannernotes()"
        *ngIf="!isEditEnabled"
        >Edit</a
      >
      <button type="submit" class="smallButton" *ngIf="isEditEnabled">
        Accept
      </button>
    </div>
  </form>
</div>

我已经尝试使用“onshow”和“onload”事件来实现这一点，正如您在上面看到的那样，但没有成功

我还在此方法中添加了代码，每当按钮从“编辑”切换到“接受”时都会调用该代码document.getElementById("bannernotes").focus ，但这不起作用，因为当被调用时，由于 ngif 尚未渲染该元素“执行”

onEditBannernotes() {
  this.isEditEnabled = !this.isEditEnabled;
}

标签： angular

解决方案

您可以使用 访问代码中的元素@ViewChild。由于元素最初可能不可用，因此将关联的属性定义为 setter，并在其中设置焦点。正如@Stefan在评论中所建议的那样，首先检查元素引用是否已定义；undefined当元素从视图中移除时，它就变成了。

// Set the focus on the textarea as soon as it is available
@ViewChild("bannernote") set bannerNoteRef(ref: ElementRef) {
  if (!!ref) {
    ref.nativeElement.focus() ;
  }
}

请参阅此 stackblitz以获取演示。

推荐阅读