Angular 角形[滚动顶部]导致不必要的行为

我的应用程序类似于上面的“stackblitz”原型，它使用

[scrollTop]

移动到结果列表的底部

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

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

</ul>

一切都很好

程序中引入了一个bug。我添加了一个“显示更多/显示更少”按钮，这取决于有多少文本可用

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>

问题-单击“显示更多或隐藏”时，界面会将我带回到最后一项，而不是停留在您试图显示更多或更少的条目上

我在单击时尝试了

event.stopPropagation（）

，除此之外，我不确定还有什么建议

---

请查看我的，因为在使用演示时，您将了解更多的问题。

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

@ViewChild('list')
list: ElementRef;

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

---

工作示例

谢谢-这很有意义-我想应该是这样的。令人惊叹的

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

@ViewChild('list')
list: ElementRef;

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