Angular 2 Faire défiler vers le bas (style de chat)

J'ai un ensemble de composants à cellule unique dans un ng-for boucle.

J'ai tout en place mais je n'arrive pas à trouver le bon

Actuellement j'ai

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

Mais cela ne fonctionne pas tout le temps car les images abaissent la fenêtre de manière asynchrone.

Quelle est la manière appropriée de faire défiler vers le bas d'une fenêtre de discussion dans Angular 2?

J'ai eu le même problème, j'utilise une combinaison AfterViewCheckedet @ViewChild(Angular2 beta.3).

Le composant:

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

Le gabarit:

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

Bien sûr, c'est assez basique. Les AfterViewCheckeddéclencheurs à chaque fois que la vue a été vérifiée:

Implémentez cette interface pour être notifié après chaque vérification de la vue de votre composant.

Si vous avez un champ d'entrée pour l'envoi de messages par exemple, cet événement est déclenché après chaque keyup (juste pour donner un exemple). Mais si vous enregistrez si l'utilisateur a fait défiler manuellement et ensuite ignorer, tout scrollToBottom()devrait être bien.

La solution la plus simple et la meilleure pour cela est:

Ajoutez cette #scrollMe [scrollTop]="scrollMe.scrollHeight"chose simple du côté du modèle

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

Voici le lien pour WORKING DEMO (avec application de chat factice) ET CODE COMPLET

Fonctionnera avec Angular2 et jusqu'à 5, comme ci-dessus, la démo se fait dans Angular5.

Remarque :

Pour erreur: ExpressionChangedAfterItHasBeenCheckedError

Veuillez vérifier votre css, c'est un problème du côté css, pas du côté angulaire, l'un des utilisateurs @KHAN a résolu cela en supprimant overflow:auto; height: 100%;de div. (veuillez vérifier les conversations pour plus de détails)

J'ai ajouté une vérification pour voir si l'utilisateur a essayé de faire défiler vers le haut.

Je vais juste laisser ça ici si quelqu'un le veut :)

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

et le code:

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 réponse acceptée se déclenche lors du défilement des messages, cela évite cela.

Vous voulez un modèle comme celui-ci.

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

Ensuite, vous souhaitez utiliser une annotation ViewChildren pour vous abonner aux nouveaux éléments de message ajoutés à la page.

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

Pensez à utiliser

.scrollIntoView()

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

Si vous voulez être sûr que vous faites défiler jusqu'à la fin une fois que * ngFor est terminé, vous pouvez utiliser ceci.

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

Important ici, la variable "last" définit si vous êtes actuellement au dernier élément, vous pouvez donc déclencher la méthode "scrollToBottom"

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

Partage de ma solution, car je n'étais pas complètement satisfait du reste. Mon problème avec AfterViewCheckedc'est que parfois je défile vers le haut, et pour une raison quelconque, ce hook de vie est appelé et il me fait défiler même s'il n'y avait pas de nouveaux messages. J'ai essayé d' utiliser , OnChangesmais c'était un problème, ce qui me conduit à cette solution. Malheureusement, en utilisant uniquement , il faisait défiler vers le bas avant que les messages ne soient rendus, ce qui n'était pas utile non plus, alors je les ai combinés pour que DoCheck indique essentiellement s'il doit appeler .DoCheckAfterViewCheckedscrollToBottom

Heureux de recevoir des commentaires.

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 réponse de Vivek a fonctionné pour moi, mais a abouti à une expression a changé après avoir vérifié l'erreur. Aucun des commentaires n'a fonctionné pour moi, mais j'ai changé la stratégie de détection des changements.

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

Dans angular using material design sidenav, j'ai dû utiliser ce qui suit:

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

Après avoir lu d'autres solutions, la meilleure solution à laquelle je puisse penser, donc vous n'exécutez que ce dont vous avez besoin est la suivante: Vous utilisez ngOnChanges pour détecter le changement approprié

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

}

Et vous utilisez ngAfterViewChecked pour appliquer réellement la modification avant son rendu, mais après le calcul de la hauteur totale

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

Si vous vous demandez comment implémenter scrollToBottom

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