Angular 5中点击Comment链接时聚焦对应textarea的实现方案

这事儿在Angular 5里其实挺容易实现的，核心就是给每个.post里的textarea绑定独立的模板引用，点击对应Comment链接时，直接调用该textarea的focus()方法就行，分两种场景给你拆解：

静态编写的Post模块 #

如果你的.post是静态写在模板里的（就像你给出的示例那样），直接给每个textarea加模板引用变量，然后在Comment的点击事件里调用它的focus方法即可：

<div class="posts">
  <div class="post">
    <div>post content</div>
    <!-- 点击时调用当前模块内textarea的focus方法 -->
    <a class="comment" (click)="commentText1.focus()">Comment</a>
    <!-- 给textarea加模板引用变量#commentText1 -->
    <textarea [(ngModel)]="model.text" class="comment-text" name="text" #commentText1></textarea>
  </div>
  <div class="post">
    <div>post content</div>
    <a class="comment" (click)="commentText2.focus()">Comment</a>
    <textarea [(ngModel)]="model.text" class="comment-text" name="text" #commentText2></textarea>
  </div>
</div>

这种方式简单直接，每个.post里的textarea都有自己的引用，点击对应Comment时只会让当前模块内的textarea获焦，完全不会影响其他模块。

动态循环生成的Post模块 #

如果你的.post是用*ngFor动态循环出来的（实际项目里大概率是这种情况），可以用@ViewChildren来批量获取所有textarea的引用，再通过索引定位到对应的元素：

第一步：修改模板 #

<div class="posts">
  <div class="post" *ngFor="let post of postsList; let idx = index">
    <div>{{post.content}}</div>
    <!-- 点击时调用组件里的方法，传递当前索引 -->
    <a class="comment" (click)="focusCommentTextarea(idx)">Comment</a>
    <!-- 给所有textarea加统一的模板引用变量#commentText -->
    <textarea [(ngModel)]="post.commentText" class="comment-text" name="text" #commentText></textarea>
  </div>
</div>

第二步：在组件类中添加逻辑 #

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  // 组件元数据（选择器、模板路径等）
})
export class YourComponent {
  postsList = [/* 这里放你的post数据数组 */];
  
  // 通过模板引用变量获取所有textarea的引用列表
  @ViewChildren('commentText') commentTextareas: QueryList<ElementRef>;

  focusCommentTextarea(index: number) {
    // 将QueryList转为数组，通过索引获取对应textarea并调用focus方法
    this.commentTextareas.toArray()[index].nativeElement.focus();
  }
}

这种方式能完美适配动态生成的post列表，保证点击每个Comment都能精准定位到当前模块内的textarea。

内容的提问来源于stack exchange，提问作者Anoop