Angular 2 滚动到底部（聊天风格）

Question

我在 ng-for 循环中有一组单细胞组件。

我已经准备好了一切，但我似乎无法弄清楚正确的

目前我有

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

但这并不总是有效的，因为图像会异步地将视口向下推。

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

原文由 Max Alexander 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到了同样的问题，我正在使用 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) { }
    }
}

模板：

 <div #scrollMe style="overflow: scroll; height: xyz;">
    <div class="..."
        *ngFor="..."
        ...>
    </div>
</div>

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

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

例如，如果您有一个用于发送消息的输入字段，则在每次按键后都会触发此事件（仅举一个例子）。但是如果你保存用户是否手动滚动然后跳过 scrollToBottom() 你应该没问题。

原文由 letmejustfixthat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

以防万一有人使用 Ionic 和 Angular，这里有一个链接，它使用一个非常简单的代码来执行滚动到底部（或顶部）的王者：

https://forum.ionicframework.com/t/scroll-content-to-top-bottom-using-ionic-4-solution/163048

原文由 kimo 发布，翻译遵循 CC BY-SA 4.0 许可协议