Angular 2 Desplazarse hacia abajo (estilo Chat)

Tengo un conjunto de componentes de una sola celda dentro de un ng-forbucle.

Tengo todo en su lugar, pero parece que no puedo encontrar el

Actualmente tengo

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

Pero esto no funciona todo el tiempo ya que las imágenes empujan la ventana hacia abajo de forma asincrónica.

¿Cuál es la forma adecuada de desplazarse hasta la parte inferior de una ventana de chat en Angular 2?

Tuve el mismo problema, estoy usando una combinación AfterViewCheckedy @ViewChild(Angular2 beta.3).

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

La plantilla:

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

Por supuesto, esto es bastante básico. Los AfterViewCheckeddisparadores cada vez que se verificó la vista:

Implemente esta interfaz para recibir notificaciones después de cada verificación de la vista de su componente.

Si tiene un campo de entrada para enviar mensajes, por ejemplo, este evento se activa después de cada tecla (solo para dar un ejemplo). Pero si guarda si el usuario se desplazó manualmente y luego omite el scrollToBottom(), debería estar bien.

La mejor y más simple solución para esto es:

Agregue esta #scrollMe [scrollTop]="scrollMe.scrollHeight"cosa simple en el lado de la Plantilla

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

Aquí está el enlace para la demostración de trabajo (con la aplicación de chat ficticia) Y EL CÓDIGO COMPLETO

Funcionará con Angular2 y también hasta 5, ya que la demostración anterior se realiza en Angular5.

Nota :

Por error: ExpressionChangedAfterItHasBeenCheckedError

Verifique su css, es un problema del lado css, no del lado angular, uno de los usuarios @KHAN lo ha resuelto eliminando overflow:auto; height: 100%;de div. (consulte las conversaciones para obtener más detalles)

Agregué un cheque para ver si el usuario intentó desplazarse hacia arriba.

Voy a dejar esto aquí si alguien lo quiere :)

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

y el código:

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 respuesta aceptada se dispara mientras se desplaza por los mensajes, esto evita eso.

Quieres una plantilla como esta.

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

Luego, desea utilizar una anotación de ViewChildren para suscribirse a los nuevos elementos de mensaje que se agregan a la página.

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

Considere usar

.scrollIntoView()

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

Si quiere estar seguro de que se desplaza hasta el final después de que * ngFor haya terminado, puede usar esto.

<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 aquí, la "última" variable define si se encuentra actualmente en el último elemento, por lo que puede activar el método "scrollToBottom"

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

Compartiendo mi solución, porque no estaba del todo satisfecho con el resto. Mi problema con AfterViewCheckedes que a veces me desplazo hacia arriba y, por alguna razón, se llama a este gancho de vida y me desplaza hacia abajo incluso si no había mensajes nuevos. Intenté usar, OnChangespero esto fue un problema, lo que me llevó a esta solución. Desafortunadamente, al usar solo DoCheck, se desplazaba hacia abajo antes de que se procesaran los mensajes, lo que tampoco fue útil, así que los combiné para que DoCheck básicamente indique AfterViewCheckedsi debería llamar scrollToBottom.

Feliz de recibir comentarios.

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 respuesta de Vivek me funcionó, pero resultó en que una expresión cambió después de que se verificó el error. Ninguno de los comentarios me funcionó, pero lo que hice fue cambiar la estrategia de detección de cambios.

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

En angular usando material design sidenav tuve que usar lo siguiente:

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

Después de leer otras soluciones, la mejor solución en la que puedo pensar, para que ejecute solo lo que necesita es la siguiente: usa ngOnChanges para detectar el cambio adecuado

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

}

Y usa ngAfterViewChecked para hacer cumplir el cambio antes de que se procese, pero después de que se calcula la altura completa

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

Si se pregunta cómo implementar scrollToBottom

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