Angular [scrollTop] вызывает нежелательное поведение

Question

https://stackblitz.com/edit/timeline-angular-7-1nb8fj

Мое приложение, подобное приведенному выше прототипу "stackblitz", использует [scrollTop] для перемещения в конец списка результатов.

<ul #list [scrollTop]="list.scrollHeight" class="list timeline">

<my-timeline-entry *ngFor="let entry of timeLine></my-timeline>

</ul>

Так что это займетнас к последней записи в цикле временной шкалы ngFor.Высота окна рассчитывается с помощью css:

 .list{ 
    overflow-y: scroll;
    height:calc(100vh - 189px);
}

Все работает хорошо.

Введена ошибка в.Я добавил кнопку «показать больше / показать меньше» в зависимости от объема доступного текста.

component.html -

<div *ngIf="timeEntryContent">
    <div class="col-11" *ngIf="timeEntryContent.length <= limit">{{timeEntryContent}}</div>
    <div class="row" *ngIf="truncating && timeEntryContent.length > limit">
        <div class="col-11">{{timeEntryContent | slice: 0:limit}}...</div>
            <div class="col-1"(click)="truncating = false">Show more</div>
    </div>
    <div class="row" *ngIf="!truncating && timeEntryContent.length > limit">
      <div class="col-11">{{timeEntryContent}}</div>
      <div class="col-1"(click)="truncating = true">show less</div>
    </div>
  </div>

component.ts - // добавлено в файл ts.

  @Input() limit: number = 60;
  truncating = true;

Проблема - при нажатии на 'показать больше или скрытьИнтерфейс возвращает меня к последнему пункту, вместо того, чтобы оставаться фиксированным на записи, которую вы пытаетесь показать более или менее.

Я пробовал event.stopPropagation() на клике, кроме этого яне уверен, что еще предложить.

Пожалуйста, просмотрите мой https://stackblitz.com/edit/timeline-angular-7-1nb8fj, так как вы поймете больше проблемы при использовании демо.

Answer 1

Не уверен, что именно не так.Но вы можете переместить свою логику под хук ngAfterViewInit в TimelineComponent:

@ViewChild('list')
list: ElementRef;

ngAfterViewInit() {
  this.list.nativeElement.scrollTop = this.list.nativeElement.scrollHeight;
}

Рабочий пример https://stackblitz.com/edit/timeline-angular-7-vxyykh?file=src/app/timeline/timeline.component.html