我在ng-for循环中有一组单细胞组分。
@H_301_1@我有一切都到位,但我似乎找不到正确的
目前我有一个
setTimeout(() => { scrollToBottom(); });
但是,由于图像异步地将视口向下推,所以这一直不起作用。
在corner2中滚动到聊天窗口底部的适当方式是什么?
我有同样的问题,我正在使用
原文链接:https://www.f2er.com/angularjs/144751.htmlAfterViewChecked
和
@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(),您应该会很好。