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

不确定到底出了什么问题。但是您可以将您的逻辑移到TimelineComponent中的ngAfterViewInit钩子下：

@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