Sudut 2 Gulir ke bawah (Gaya obrolan)

Saya memiliki satu set komponen sel tunggal dalam satu ng-forlingkaran.

Saya memiliki segalanya di tempat tetapi saya tidak bisa menemukan yang tepat

Saat ini saya punya

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

Tapi ini tidak bekerja sepanjang waktu karena gambar secara asinkron mendorong viewport ke bawah.

Apa cara yang tepat untuk menggulir ke bagian bawah jendela obrolan di Angular 2?

Saya memiliki masalah yang sama, saya menggunakan kombinasi AfterViewCheckeddan @ViewChild(Angular2 beta.3).

Komponen:

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

Template:

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

Tentu saja ini sangat mendasar. The AfterViewCheckedmemicu setiap kali pandangan diperiksa:

Terapkan antarmuka ini untuk mendapatkan pemberitahuan setelah setiap pemeriksaan tampilan komponen Anda.

Jika Anda memiliki input-field untuk mengirim pesan misalnya, event ini dijalankan setelah setiap keyup (hanya untuk memberikan contoh). Tetapi jika Anda menyimpan apakah pengguna menggulir secara manual dan kemudian melewati scrollToBottom()Anda harus baik-baik saja.

Solusi paling sederhana dan terbaik untuk ini adalah:

Tambahkan hal #scrollMe [scrollTop]="scrollMe.scrollHeight"sederhana ini di sisi Template

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

Berikut ini tautan untuk WORKING DEMO (Dengan aplikasi obrolan boneka) DAN KODE LENGKAP

Akan bekerja dengan Angular2 dan juga hingga 5, Seperti demo di atas dilakukan di Angular5.

Catatan :

Untuk kesalahan: ExpressionChangedAfterItHasBeenCheckedError

Silakan periksa css Anda, ini masalah sisi css, bukan sisi Angular, Salah satu pengguna @KHAN telah menyelesaikannya dengan menghapus overflow:auto; height: 100%;dari div. (silakan periksa percakapan untuk detailnya)

Saya menambahkan tanda centang untuk melihat apakah pengguna mencoba menggulir ke atas.

Saya hanya akan meninggalkan ini di sini jika ada yang menginginkannya :)

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

dan kode:

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

}

Jawaban yang diterima menyala saat menggulir pesan, ini menghindarinya.

Anda menginginkan template seperti ini.

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

Kemudian Anda ingin menggunakan anotasi ViewChildren untuk berlangganan elemen pesan baru yang ditambahkan ke halaman.

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

Pertimbangkan untuk menggunakan

.scrollIntoView()

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

Jika Anda ingin memastikan, bahwa Anda menggulir ke akhir setelah * ngFor selesai, Anda dapat menggunakan ini.

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

Penting di sini, "lalu" mendefinisikan variabel jika Anda saat ini di item terakhir, sehingga Anda dapat memicu "scrollToBottom" Metode

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

Berbagi solusi saya, karena saya tidak sepenuhnya puas dengan yang lain. Masalah saya AfterViewCheckedadalah terkadang saya menggulir ke atas, dan untuk beberapa alasan, pengait kehidupan ini dipanggil dan menggulung saya ke bawah meskipun tidak ada pesan baru. Saya mencoba menggunakan OnChangestetapi ini adalah masalah, yang mengarahkan saya ke solusi ini . Sayangnya, hanya dengan menggunakan DoCheck, itu bergulir ke bawah sebelum pesan dirender, yang juga tidak berguna, jadi saya menggabungkannya sehingga DoCheck pada dasarnya menunjukkan AfterViewCheckedapakah itu harus memanggil scrollToBottom.

Senang menerima umpan balik.

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%

Jawaban Vivek telah berhasil untuk saya, tetapi menghasilkan ekspresi yang berubah setelah diperiksa kesalahannya. Tidak ada komentar yang berhasil untuk saya, tetapi yang saya lakukan adalah mengubah strategi deteksi perubahan.

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

Dalam sudut menggunakan desain material sidenav saya harus menggunakan yang berikut:

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

Setelah membaca solusi lain, solusi terbaik yang dapat saya pikirkan, jadi Anda hanya menjalankan yang Anda butuhkan adalah sebagai berikut: Anda menggunakan ngOnChanges untuk mendeteksi perubahan yang tepat

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

}

Dan Anda menggunakan ngAfterViewChecked untuk benar-benar menerapkan perubahan sebelum dirender, tetapi setelah ketinggian penuh dihitung

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

Jika Anda bertanya-tanya bagaimana cara mengimplementasikan scrollToBottom

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