设计一个聊天网页,需要把显示聊天内容的div自动滚屏到底部,但是div缺少scrollTo函数,变通的方法是
div.scrollTop = div.scrollHeight
但在angular中,如何找到这个时机呢? ngFor执行完毕是个时机,但ngFor语句没有提供finished事件。这个事件只能自己制造。
component中增加ngForCallback方法
public ngForCallback() { ...}
推荐使用AfterViewChecked and @ViewChild 方法,下面详细介绍:
在component中:
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) { } }}
在template中:
AfterViewChecked的缺陷是每次组件试图检查后都调用,input控件中,每次keyup都需要检查,调用次数太多。
参考资料:
- http://stackoverflow.com/questions/35819264/angular-2-callback-when-ngfor-has-finished
- http://stackoverflow.com/questions/35232731/angular2-scroll-to-bottom-chat-style