Angular 2 Cuộn xuống dưới cùng (Kiểu trò chuyện)

Tôi có một tập hợp các thành phần ô đơn trong một ng-forvòng lặp.

Tôi có mọi thứ tại chỗ nhưng dường như tôi không thể tìm ra cách thích hợp

Hiện tại tôi có

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

Nhưng điều này không hoạt động mọi lúc vì hình ảnh đẩy khung nhìn xuống một cách không đồng bộ.

Cách thích hợp để cuộn xuống cuối cửa sổ trò chuyện trong Angular 2 là gì?

Tôi đã gặp vấn đề tương tự, tôi đang sử dụng một AfterViewCheckedvà @ViewChildkết hợp (Angular2 beta.3).

Thanh phân:

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) { }                 
    }
}

Bản mẫu:

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

Tất nhiên điều này là khá cơ bản. Các AfterViewCheckedkích hoạt mỗi khi chế độ xem được kiểm tra:

Triển khai giao diện này để nhận thông báo sau mỗi lần kiểm tra chế độ xem thành phần của bạn.

Nếu bạn có một trường đầu vào để gửi tin nhắn, chẳng hạn như sự kiện này sẽ được kích hoạt sau mỗi lần gõ phím (chỉ để đưa ra một ví dụ). Nhưng nếu bạn lưu cho dù người dùng cuộn theo cách thủ công và sau đó bỏ qua thì scrollToBottom()bạn sẽ ổn.

Đơn giản nhất và giải pháp tốt nhất cho việc này là:

Thêm điều #scrollMe [scrollTop]="scrollMe.scrollHeight"đơn giản này vào bên Mẫu

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

Đây là liên kết cho LÀM VIỆC DEMO (Với ứng dụng trò chuyện giả) VÀ MÃ ĐẦY ĐỦ

Sẽ hoạt động với Angular2 và tối đa 5, Như bản demo trên được thực hiện trong Angular5.

Ghi chú :

Đối với lỗi: ExpressionChangedAfterItHasBeenCheckedError

Vui lòng kiểm tra css của bạn, đó là vấn đề của phía css, không phải phía Angular, Một trong những người dùng @KHAN đã giải quyết vấn đề đó bằng cách xóa overflow:auto; height: 100%;khỏi div. (vui lòng kiểm tra các cuộc trò chuyện để biết chi tiết)

Tôi đã thêm một kiểm tra để xem liệu người dùng có cố gắng cuộn lên hay không.

Tôi chỉ sẽ để cái này ở đây nếu có ai muốn nó :)

<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>

và mã:

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) { }
    }

}

Câu trả lời được chấp nhận sẽ kích hoạt khi cuộn qua các thư, điều này tránh được điều đó.

Bạn muốn một mẫu như thế này.

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

Sau đó, bạn muốn sử dụng chú thích ViewChildren để đăng ký các phần tử thông báo mới được thêm vào trang.

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

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

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

Cân nhắc sử dụng

.scrollIntoView()

Xem https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Nếu bạn muốn chắc chắn rằng bạn đang cuộn đến cuối sau khi * ngFor hoàn tất, bạn có thể sử dụng điều này.

<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;
}

Quan trọng ở đây, biến "cuối cùng" xác định nếu bạn hiện đang ở mục cuối cùng, vì vậy bạn có thể kích hoạt phương thức "scrollToBottom"

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

Chia sẻ giải pháp của tôi, vì tôi không hoàn toàn hài lòng với phần còn lại. Vấn đề của tôi AfterViewCheckedlà đôi khi tôi đang cuộn lên, và vì một lý do nào đó, cái móc cuộc sống này được gọi và nó cuộn tôi xuống ngay cả khi không có tin nhắn mới. Tôi đã thử sử dụng OnChangesnhưng đây là một vấn đề, dẫn tôi đến giải pháp này . Thật không may, chỉ sử dụng DoCheck, nó đã cuộn xuống trước khi các thông báo được hiển thị, điều này cũng không hữu ích, vì vậy tôi kết hợp chúng để DoCheck về cơ bản chỉ ra AfterViewCheckedliệu nó có nên gọi hay không scrollToBottom.

Rất vui khi nhận được phản hồi.

export class ChatComponent implements DoCheck, AfterViewChecked {

    @Input() public messages: Message[] = [];
    @ViewChild('scrollable') private scrollable: ElementRef;

    private shouldScrollDown: boolean;
    private iterableDiffer;

    constructor(private iterableDiffers: IterableDiffers) {
        this.iterableDiffer = this.iterableDiffers.find([]).create(null);
    }

    ngDoCheck(): void {
        if (this.iterableDiffer.diff(this.messages)) {
            this.numberOfMessagesChanged = true;
        }
    }

    ngAfterViewChecked(): void {
        const isScrolledDown = Math.abs(this.scrollable.nativeElement.scrollHeight - this.scrollable.nativeElement.scrollTop - this.scrollable.nativeElement.clientHeight) <= 3.0;

        if (this.numberOfMessagesChanged && !isScrolledDown) {
            this.scrollToBottom();
            this.numberOfMessagesChanged = false;
        }
    }

    scrollToBottom() {
        try {
            this.scrollable.nativeElement.scrollTop = this.scrollable.nativeElement.scrollHeight;
        } catch (e) {
            console.error(e);
        }
    }

}

chat.component.html

<div class="chat-wrapper">

    <div class="chat-messages-holder" #scrollable>

        <app-chat-message *ngFor="let message of messages" [message]="message">
        </app-chat-message>

    </div>

    <div class="chat-input-holder">
        <app-chat-input (send)="onSend($event)"></app-chat-input>
    </div>

</div>

chat.component.sass

.chat-wrapper
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column
  height: 100%

  .chat-messages-holder
    overflow-y: scroll !important
    overflow-x: hidden
    width: 100%
    height: 100%

Câu trả lời của Vivek đã phù hợp với tôi, nhưng dẫn đến một biểu thức đã thay đổi sau khi nó được kiểm tra lỗi. Không có nhận xét nào phù hợp với tôi, nhưng những gì tôi đã làm là thay đổi chiến lược phát hiện thay đổi.

import {  Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'page1',
  templateUrl: 'page1.html',
})

Trong thiết kế góc cạnh bằng material design, tôi phải sử dụng những thứ sau:

let ele = document.getElementsByClassName('md-sidenav-content');
    let eleArray = <Element[]>Array.prototype.slice.call(ele);
    eleArray.map( val => {
        val.scrollTop = val.scrollHeight;
    });

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

Sau khi đọc các giải pháp khác, giải pháp tốt nhất mà tôi có thể nghĩ ra, vì vậy bạn chỉ chạy những gì bạn cần như sau: Bạn sử dụng ngOnChanges để phát hiện thay đổi thích hợp

ngOnChanges() {
  if (changes.messages) {
      let chng = changes.messages;
      let cur  = chng.currentValue;
      let prev = chng.previousValue;
      if(cur && prev) {
        // lazy load case
        if (cur[0].id != prev[0].id) {
          this.lazyLoadHappened = true;
        }
        // new message
        if (cur[cur.length -1].id != prev[prev.length -1].id) {
          this.newMessageHappened = true;
        }
      }
    }

}

Và bạn sử dụng ngAfterViewChecked để thực thi thay đổi trước khi nó hiển thị nhưng sau khi tính toàn bộ chiều cao

ngAfterViewChecked(): void {
    if(this.newMessageHappened) {
      this.scrollToBottom();
      this.newMessageHappened = false;
    }
    else if(this.lazyLoadHappened) {
      // keep the same scroll
      this.lazyLoadHappened = false
    }
  }

Nếu bạn đang tự hỏi làm thế nào để triển khai scrollToBottom

@ViewChild('scrollWrapper') private scrollWrapper: ElementRef;
scrollToBottom(){
    try {
      this.scrollWrapper.nativeElement.scrollTop = this.scrollWrapper.nativeElement.scrollHeight;
    } catch(err) { }
  }