Angular 2 Scorri verso il basso (stile chat)

Ho una serie di componenti a cella singola all'interno di un file ng-for ciclo.

Ho tutto a posto ma non riesco a capire il corretto

Al momento ce l'ho

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

Ma questo non funziona sempre poiché le immagini spingono in modo asincrono la visualizzazione verso il basso.

Qual è il modo appropriato per scorrere fino alla fine di una finestra di chat in Angular 2?

Ho avuto lo stesso problema, sto usando un AfterViewCheckede@ViewChild combinazione (Angular2 beta.3).

Il componente:

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

Il template:

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

Ovviamente questo è piuttosto semplice. I AfterViewCheckedtrigger ogni volta che la visualizzazione è stata controllata:

Implementa questa interfaccia per ricevere una notifica dopo ogni controllo della visualizzazione del tuo componente.

Se hai un campo di input per l'invio di messaggi, ad esempio, questo evento viene attivato dopo ogni tasto (solo per fare un esempio). Ma se salvi se l'utente ha fatto scorrere manualmente e poi salti scrollToBottom(), dovresti stare bene.

La soluzione più semplice e migliore per questo è:

Aggiungi questa #scrollMe [scrollTop]="scrollMe.scrollHeight"semplice cosa sul lato del modello

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

Ecco il link per DEMO FUNZIONANTE (con app di chat fittizia) E CODICE COMPLETO

Funzionerà con Angular2 e anche fino a 5, come sopra la demo viene eseguita in Angular5.

Nota :

Per errore: ExpressionChangedAfterItHasBeenCheckedError

Per favore controlla il tuo css, è un problema del lato CSS, non del lato Angular, uno degli utenti @KHAN lo ha risolto rimuovendo overflow:auto; height: 100%;da div. (controlla le conversazioni per i dettagli)

Ho aggiunto un controllo per vedere se l'utente ha provato a scorrere verso l'alto.

Lo lascio qui se qualcuno lo vuole :)

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

e il codice:

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

}

La risposta accettata si attiva durante lo scorrimento dei messaggi, questo lo evita.

Vuoi un modello come questo.

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

Quindi si desidera utilizzare un'annotazione ViewChildren per iscriversi ai nuovi elementi del messaggio aggiunti alla pagina.

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

Considera l'utilizzo

.scrollIntoView()

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

Se vuoi essere sicuro di scorrere fino alla fine dopo che * ngFor è terminato, puoi usare questo.

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

Importante qui, la variabile "last" definisce se ti trovi attualmente all'ultimo elemento, quindi puoi attivare il metodo "scrollToBottom"

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

Condividendo la mia soluzione, perché non ero completamente soddisfatto del resto. Il mio problema AfterViewCheckedè che a volte sto scorrendo verso l'alto e, per qualche motivo, questo gancio della vita viene chiamato e mi scorre verso il basso anche se non c'erano nuovi messaggi. Ho provato a utilizzare OnChangesma questo era un problema, che mi ha portato a questa soluzione. Sfortunatamente, usando solo DoCheck, scorreva verso il basso prima che i messaggi venissero visualizzati, il che non era nemmeno utile, quindi li ho combinati in modo che DoCheck in pratica indichi AfterViewCheckedse deve chiamare scrollToBottom.

Felice di ricevere feedback.

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%

La risposta di Vivek ha funzionato per me, ma ha provocato che un'espressione è cambiata dopo che è stato verificato l'errore. Nessuno dei commenti ha funzionato per me, ma quello che ho fatto è stato cambiare la strategia di rilevamento delle modifiche.

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

In angolare utilizzando il material design sidenav ho dovuto usare quanto segue:

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

Dopo aver letto altre soluzioni, la migliore soluzione a cui riesco a pensare, quindi esegui solo ciò di cui hai bisogno è la seguente: Usa ngOnChanges per rilevare la modifica corretta

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

}

E si utilizza ngAfterViewChecked per applicare effettivamente la modifica prima del rendering ma dopo aver calcolato l'altezza completa

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

Se ti stai chiedendo come implementare scrollToBottom

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