如何使页面在消息发送或消息以angular2打开时自动向下滚动到底部

我有一个信息对话部分，在这里我需要显示滚动到底部，当页面再次打开时，滚动必须在底部。我的意思是最后一条信息应该先显示出来

HTML:

你可以用

 window.scrollTo(0,document.body.scrollHeight);

在这里您可以找到相关的讨论

---

这里有一个角度的解决方案：

• 我添加了

  #scrollCottom

  模板变量
• 您可以使用

  ViewChild

  获取元素引用，并应检查滚动底部问题

成分

import { AfterViewChecked, ElementRef, ViewChild, OnInit} from 'angular2/core'
@Component({
    ...
})
export class YourComponent implements OnInit, AfterViewChecked {
    @ViewChild('scrollBottom') private scrollBottom: ElementRef;

    ngOnInit() {
        this.scrollToBottom();
    }

    ngAfterViewChecked() {        
     this.scrollToBottom();        
    } 

    scrollToBottom(): void {
        try {
            this.scrollBottom.nativeElement.scrollTop = this.scrollBottom.nativeElement.scrollHeight;
        } catch(err) { }
    }
}

HTML:

<ul #scrollBottom>
  <li *ngFor="let reply of message_show.messages">
    <img [src]="reply.from_user_image || '../assets/images/msg.png'"/>
    <p><b>{{reply.name}} </b> <span> {{reply.updated_at | date:'dd.MM.yyyy'}} - {{reply.updated_at | date:'h:mm'}}</span></p>
    <p>{{reply.text}}</p>
  </li>
</ul>

{reply.name}{{reply.updated_在|日期：'dd.MM.yyyy'}-{{reply.updated_在|日期：'h:MM'}

{{reply.text}

此i get类“MessageComponent”错误地实现了接口“AfterViewChecked”。类型“MessageComponent”中缺少属性“ngAfterViewChecked”。这是使用ngAfterViewChecked实现的最佳方法吗？如果您在ngAfterViewChecked中对任何内容进行控制台处理，您会注意到它是无限执行的

import { AfterViewChecked, ElementRef, ViewChild, OnInit} from 'angular2/core'
@Component({
    ...
})
export class YourComponent implements OnInit, AfterViewChecked {
    @ViewChild('scrollBottom') private scrollBottom: ElementRef;

    ngOnInit() {
        this.scrollToBottom();
    }

    ngAfterViewChecked() {        
     this.scrollToBottom();        
    } 

    scrollToBottom(): void {
        try {
            this.scrollBottom.nativeElement.scrollTop = this.scrollBottom.nativeElement.scrollHeight;
        } catch(err) { }
    }
}

<ul #scrollBottom>
  <li *ngFor="let reply of message_show.messages">
    <img [src]="reply.from_user_image || '../assets/images/msg.png'"/>
    <p><b>{{reply.name}} </b> <span> {{reply.updated_at | date:'dd.MM.yyyy'}} - {{reply.updated_at | date:'h:mm'}}</span></p>
    <p>{{reply.text}}</p>
  </li>
</ul>