angular - 单击时将焦点设置为 textarea angular 5

Question

<div class="posts">    
   <div class="post">
      <div>post content</div>
    <a class="comment">Comment</a>

    <textarea [(ngModel)]= "model.text" class="comment-text" name="text"></textarea>
    </div>

    <div class="post">
       <div>post content</div>
    <a class="comment">Comment</a>

    <textarea [(ngModel)]= "model.text" class="comment-text" name="text"></textarea>
    </div>
</div>
...

我想在“a”点击时将焦点设置在 textarea 上。谁能帮帮我吗。我正在使用 Angular 5

Answer 1

如果使用模板变量，则可以直接从 HTML 文件中的标记设置焦点。您可以在 (click) 中引用它方法。这样，不需要通过代码访问 DOM，它留在 HTML 文件中，更容易调试:

HTML

...
<textarea #textarea1 [(ngModel)]="text" class="comment-text" name="text"></textarea>
<button (click)="textarea1.focus()">SetFocus on the first textarea</button>
...
<textarea #textarea2 [(ngModel)]="text" class="comment-text" name="text"></textarea>
<button (click)="textarea2.focus()">SetFocus on the second textarea</button>
...

DEMO