Angular实现DIV自动滚屏到底部scrollToBottom

为什么80%的码农都做不了架构师？>>>   

设计一个聊天网页，需要把显示聊天内容的div自动滚屏到底部，但是div缺少scrollTo函数，变通的方法是

div.scrollTop = div.scrollHeight

但在angular中，如何找到这个时机呢？ ngFor执行完毕是个时机，但ngFor语句没有提供finished事件。这个事件只能自己制造。

  ...
  {
     {ngForCallback()}}

 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都需要检查，调用次数太多。

参考资料：

1. http://stackoverflow.com/questions/35819264/angular-2-callback-when-ngfor-has-finished
2. http://stackoverflow.com/questions/35232731/angular2-scroll-to-bottom-chat-style

转载于:https://my.oschina.net/lieefu/blog/882728