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

Question

我在ng-for循环中有一组单细胞组件.我已经掌握了一切,但我似乎无法找到合适的东西

目前我有一个

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

但是这不会一直有效,因为图像会异步地向下推动视口.

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

Answer 1

我有同样的问题,我正在使用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每次有人检查时间触发器:

实现此接口以在每次检查组件视图后收到通知.

例如,如果你有一个用于发送消息的输入字段,那么在每个keyup之后会触发这个事件(仅举一个例子).但是,如果你保存用户是否手动滚动然后跳过scrollToBottom()你应该没问题.

Answer 2

最简单,最好的解决方案是:

#scrollMe [scrollTop]="scrollMe.scrollHeight"在Template端添加这个简单的东西

<div style="overflow: scroll; height: xyz;" #scrollMe [scrollTop]="scrollMe.scrollHeight">
    <div class="..." 
        *ngFor="..."
        ...>  
    </div>
</div>

这是工作演示(使用虚拟聊天应用程序)和完整代码的链接

将与Angular2一起使用,也可以使用5,如上面的演示在Angular5中完成.

注意 :

出错: ExpressionChangedAfterItHasBeenCheckedError

请检查你的CSS,这是css方面的问题,而不是Angular方面,用户之一@KHAN通过删除overflow:auto; height: 100%;来解决了这个问题div.(请查看对话详情)

Answer 3

我添加了一个检查以查看用户是否尝试向上滚动.

如果有人想要的话我就打算离开这里:)

<div class="jumbotron">
    <div class="messages-box" #scrollMe (scroll)="onScroll()">
        <app-message [message]="message" [userId]="profile.userId" *ngFor="let message of messages.slice().reverse()"></app-message>
    </div>

    <textarea [(ngModel)]="newMessage" (keyup.enter)="submitMessage()"></textarea>
</div>

和代码:

import { AfterViewChecked, ElementRef, ViewChild, Component, OnInit } from '@angular/core';
import {AuthService} from "../auth.service";
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/concatAll';
import {Observable} from 'rxjs/Rx';

import { Router, ActivatedRoute } from '@angular/router';

@Component({
    selector: 'app-messages',
    templateUrl: './messages.component.html',
    styleUrls: ['./messages.component.scss']
})
export class MessagesComponent implements OnInit {
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;
    messages:Array<MessageModel>
    newMessage = ''
    id = ''
    conversations: Array<ConversationModel>
    profile: ViewMyProfileModel
    disableScrollDown = false

    constructor(private authService:AuthService,
                private route:ActivatedRoute,
                private router:Router,
                private conversationsApi:ConversationsApi) {
    }

    ngOnInit() {

    }

    public submitMessage() {

    }

     ngAfterViewChecked() {
        this.scrollToBottom();
    }

    private onScroll() {
        let element = this.myScrollContainer.nativeElement
        let atBottom = element.scrollHeight - element.scrollTop === element.clientHeight
        if (this.disableScrollDown && atBottom) {
            this.disableScrollDown = false
        } else {
            this.disableScrollDown = true
        }
    }


    private scrollToBottom(): void {
        if (this.disableScrollDown) {
            return
        }
        try {
            this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
        } catch(err) { }
    }

}

Answer 4

考虑使用

.scrollIntoView()

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 5

这些答案都没有一半是正确的.滚动浏览消息时会触发接受的答案.

你想要一个像这样的模板.

<div #content>
  <div #messages *ngFor="let message of messages">
    {{message}}
  </div>
</div>

然后,您希望使用ViewChildren批注来订阅要添加到页面的新消息元素.

@ViewChildren('messages') messages: QueryList<any>;
@ViewChild('content') content: ElementRef;

ngAfterViewInit() {
  this.messages.changes.subscribe(this.scrollToBottom);
}

scrollToBottom = () => {
  try {
    this.content.nativeElement.scrollTop = this.content.nativeElement.scrollHeight;
  } catch (err) {}
}

Answer 6

如果你想确定,在完成*ngFor之后滚动到最后,你可以使用它.

<div #myList>
 <div *ngFor="let item of items; let last = last">
  {{item.title}}
  {{last ? scrollToBottom() : ''}}
 </div>
</div>

scrollToBottom() {
 this.myList.nativeElement.scrollTop = this.myList.nativeElement.scrollHeight;
}

重要的是,"last"变量定义您当前是否在最后一项,因此您可以触发"scrollToBottom"方法

Answer 7

如果您使用的是最新版本的 Angular，以下内容就足够了：

<div #scrollMe style="overflow: scroll; height: xyz;" [scrollTop]="scrollMe.scrollHeight>
    <div class="..." 
        *ngFor="..."
        ...>  
    </div>
</div>

Answer 8

this.contentList.nativeElement.scrollTo({left: 0 , top: this.contentList.nativeElement.scrollHeight, behavior: 'smooth'});

Answer 9

const element = document.getElementById('box');
element.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });