当我将元素设置为在 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) {&nbsp; this.underUpdateTagId = tag.id;&nbsp; // wait a tick&nbsp; setTimeout(() => {&nbsp; &nbsp; this.spans.toArray()[index].nativeElement.focus();&nbsp; });}PS，这将焦点设置在开头，您可能希望它在结尾，如果是这种情况，也许这个问题可以帮助您：Use JavaScript to place cursor at end of text in text input element