当我将元素设置为 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，通过放置一个模板引用，拾取被选中的 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();
  });
}

STACKBLITZ

PS，这把重点放在开头，你可能想要在结尾，如果是这样的话，也许这个问题可以帮助你：Use JavaScript to place cursor at end of text in text input element

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

How I can set focus on the element when I am setting it to content editable in Angular 6?

html

javascript

typescript

angular

angular6