angular2滚动到底部(聊天风格)

发布时间：2020-12-17 08:17:41 所属栏目：安全来源：网络整理

导读：我在ng-for循环中有一组单细胞组分。我有一切都到位，但我似乎找不到正确的目前我有一个 setTimeout(() = { scrollToBottom();}); 但是，由于图像异步地将视口向下推，所以这一直不起作用。在corner2中滚动到聊天窗口底部的适当方式是什么？我有同样的问

我在ng-for循环中有一组单细胞组分。
我有一切都到位，但我似乎找不到正确的

目前我有一个

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

但是，由于图像异步地将视口向下推，所以这一直不起作用。

在corner2中滚动到聊天窗口底部的适当方式是什么？

我有同样的问题，我正在使用 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都会触发：

Implement this interface to get notified after every check of your component’s view.

如果您有一个用于发送消息的输入字段，则在每个按键之后触发此事件(仅供参考)。但是，如果您保存用户是否手动滚动，然后跳过scrollToBottom()，您应该会很好。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!