Прокрутите последний элемент цикла ngFor в поле зрения

Question

Мои пользователи могут добавлять записи внизу списка прокрутки. Однако полоса прокрутки не перемещается автоматически при добавлении записи, поэтому пользователь не может видеть только что добавленную запись. Как мне всегда держать полосу прокрутки в самом прокручиваемом положении для отображения последних записей (используя Angular 5)?

Answer 1

Вы можете прокрутить новую запись в поле зрения, установив на нее фокус, как показано в этом стеке бликов .

• Элементы элемента могут быть сфокусированы, если они имеют атрибут tabindex
• Они также должны иметь атрибут стиля outline: none (для удаления контура фокуса)
• В элементах элемента должна быть установлена ​​ссылочная переменная шаблона (например, #commentDiv)
• Изменения в списке отслеживаются с помощью ViewChildren и события QueryList.changes
• При обнаружении изменения в списке фокус устанавливается на последний элемент списка

<Ч />

HTML:

<textarea [(ngModel)]="newComment"></textarea>
<div>
    <button (click)="addComment()">Add comment to list</button>
</div>
<div>
  Comments
</div>
<div class="list-container">
    <div tabindex="1" #commentDiv class="comment-item" *ngFor="let comment of comments">
        {{ comment }}
    </div>
</div>

CSS:

div.list-container {
  height: 150px; 
  overflow: auto;
  border: solid 1px black;
}

div.comment-item {
  outline: none;
}

Код:

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';
...    
export class AppComponent {

  @ViewChildren("commentDiv") commentDivs: QueryList<ElementRef>;

  comments = new Array<string>();
  newComment: string = "Default comment content";

  ngAfterViewInit() {
    this.commentDivs.changes.subscribe(() => {
      if (this.commentDivs && this.commentDivs.last) {
        this.commentDivs.last.nativeElement.focus();
      }
    });
  }

  addComment() {
    this.comments.push(this.newComment);
  }
}