当我将元素设置为在 Angular 6 中可编辑的内容时，如何设置元素的焦点？

Question

我正在使用 Angular 6 的 contentEditable 属性来编辑元素的内容（在 ngFor 中）当 contentEditable 属性为 true 时，如何将焦点设置在标记元素上？<div class="tag" *ngFor="let tag of tags">   <span [contentEditable]="underUpdateTagId==tag.id" [textContent]="tag.title     (input)="tag.title=$event.target.textContent">   </span>   <span *ngIf="underUpdateTagId!=tag.id" class="edit text-info" (click)="beforeEdit(tag)">         <i class="fas fa-pencil-alt"></i>   </span>   <span *ngIf="underUpdateTagId==tag.id" class="update text-success" (click)="editTag(tag)">         <i class="fas fa-check save"></i>   </span>   <span class="delete text-danger" (click)="delete(tag)">         <i class="fas fa-trash-alt"></i>   </span></div>用户界面：

Answer 1

我们可以使用ViewChildren获取所有跨度，通过放置一个模板引用，拿起span被选中的元素并将焦点设置到元素上。

所以我建议添加模板引用并在您的beforeEdit()传递中标记的索引（我们从 ngFor 获取它），所以当我们想要将焦点放在字段上时可以引用它：

<!-- add template reference in below span tag --->

<span [contentEditable]="underUpdateTagId==tag.id" ... #spans>

<!-- pass index as from ngFor iteration to beforeEdit() -->

<span *ngIf="underUpdateTagId!=tag.id" class="edit text-info" (click)="beforeEdit(tag, i)">

<!-- more code --->

在我们引用的组件中spans，模板引用。当点击时指定传递索引的跨度应该被关注：

@ViewChildren("spans") spans: QueryList<ElementRef>;

underUpdateTagId = null;

beforeEdit(tag, index) {

  this.underUpdateTagId = tag.id;

  // wait a tick

  setTimeout(() => {

    this.spans.toArray()[index].nativeElement.focus();

  });

}

PS，这将焦点设置在开头，您可能希望它在结尾，如果是这种情况，也许这个问题可以帮助您：Use JavaScript to place cursor at end of text in text input element