Angular 2 滚动到底部（类似聊天窗口）

6 浏览
0 Comments

Angular 2 滚动到底部（类似聊天窗口）

我在一个ng-for循环中有一组单元格组件。

我已经准备好了一切，但我似乎无法找到正确的方法。

当前我有

setTimeout(() => {
  scrollToBottom();
});

但是当图像异步地将视口向下推时，这并不总是有效。

在Angular 2中滚动到聊天窗口底部的适当方法是什么？

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

最简单且最好的解决方法是：

在模板中添加这个简单的东西#scrollMe [scrollTop]="scrollMe.scrollHeight"

这里是带有虚拟聊天应用程序的工作演示链接和完整代码

将适用于Angular2和最高为5，因为上面的演示是在Angular5中完成的。

注意：

对于错误：ExpressionChangedAfterItHasBeenCheckedError

请检查您的CSS，这是CSS方面的问题，而不是Angular方面的问题，其中一个用户@KHAN通过从

中删除overflow:auto; height: 100%;已经解决了这个问题。 （请检查详细信息的对话框）

0
0 Comments

我有同样的问题，我在使用AfterViewChecked 和@ViewChild 的组合（Angular2 beta.3）。

组件：

import {..., AfterViewChecked, ElementRef, ViewChild, OnInit} from 'angular2/core'
@Component({
    ...
})
export class ChannelComponent implements OnInit, AfterViewChecked {
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;
    ngOnInit() { 
        this.scrollToBottom();
    }
    ngAfterViewChecked() {        
        this.scrollToBottom();        
    } 
    scrollToBottom(): void {
        try {
            this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
        } catch(err) { }                 
    }
}

模板：

当然，这是非常基本的。 AfterViewChecked 在每次检查视图时触发：

实现此接口以在每次检查组件视图后得到通知。

例如，如果您有一个用于发送消息的输入框，每次键盘松开时都会触发此事件（仅为举例）。但是，如果您保存了用户是否手动滚动，然后跳过 scrollToBottom()，那么您应该没问题。

0