Winkel 2 Nach unten scrollen (Chat-Stil)

Ich habe eine Reihe von Einzelzellenkomponenten innerhalb einer ng-forSchleife.

Ich habe alles an Ort und Stelle, aber ich kann nicht scheinen, das richtige herauszufinden

Derzeit habe ich

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

Dies funktioniert jedoch nicht immer, da Bilder das Ansichtsfenster asynchron nach unten drücken.

Was ist der geeignete Weg, um in Angular 2 zum Ende eines Chat-Fensters zu scrollen?

Ich hatte das gleiche Problem, ich benutze eine AfterViewChecked und @ViewChildKombination (Angular2 Beta.3).

Die Komponente:

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

Die Vorlage:

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

Das ist natürlich ziemlich einfach. DasAfterViewChecked Auslöser jedes Mal, wenn die Ansicht überprüft wurde:

Implementieren Sie diese Schnittstelle, um nach jeder Überprüfung der Ansicht Ihrer Komponente benachrichtigt zu werden.

Wenn Sie beispielsweise ein Eingabefeld zum Senden von Nachrichten haben, wird dieses Ereignis nach jeder Eingabe ausgelöst (um nur ein Beispiel zu nennen). Wenn Sie jedoch speichern, ob der Benutzer manuell gescrollt hat, und dann das überspringen scrollToBottom(), sollte dies in Ordnung sein.

Die einfachste und beste Lösung dafür ist:

Fügen Sie diese #scrollMe [scrollTop]="scrollMe.scrollHeight"einfache Sache auf der Vorlagenseite hinzu

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

Hier ist der Link für WORKING DEMO (mit Dummy-Chat-App) UND FULL CODE

Funktioniert mit Angular2 und auch bis zu 5. Wie oben wird die Demo in Angular5 durchgeführt.

Hinweis :

Bei Fehler: ExpressionChangedAfterItHasBeenCheckedError

Bitte überprüfen Sie Ihre CSS, es ist ein Problem der CSS-Seite, nicht der Angular-Seite. Einer der Benutzer @KHAN hat das durch Entfernen overflow:auto; height: 100%;von gelöst div. (Bitte überprüfen Sie die Gespräche für Details)

Ich habe eine Überprüfung hinzugefügt, um festzustellen, ob der Benutzer versucht hat, nach oben zu scrollen.

Ich werde das hier einfach lassen, wenn es jemand will :)

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

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

}

Die akzeptierte Antwort wird beim Scrollen durch die Nachrichten ausgelöst. Dadurch wird dies vermieden.

Sie möchten eine solche Vorlage.

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

Anschließend möchten Sie eine ViewChildren-Annotation verwenden, um neue Nachrichtenelemente zu abonnieren, die der Seite hinzugefügt werden.

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

Erwägen Sie die Verwendung

.scrollIntoView()

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

Wenn Sie sicher sein möchten, dass Sie nach Abschluss von * ngFor bis zum Ende scrollen, können Sie dies verwenden.

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

Wichtig hier ist, dass die Variable "last" definiert, ob Sie sich gerade am letzten Element befinden, sodass Sie die Methode "scrollToBottom" auslösen können

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

Ich teile meine Lösung, weil ich mit dem Rest nicht ganz zufrieden war. Mein Problem dabei AfterViewCheckedist, dass ich manchmal nach oben scrolle und aus irgendeinem Grund dieser Life Hook aufgerufen wird und mich nach unten scrollt, selbst wenn es keine neuen Nachrichten gab. Ich habe versucht, es zu verwenden, OnChangesaber dies war ein Problem, das mich zu dieser Lösung führte. Leider wurde nur DoCheckmit gescrollt, bevor die Nachrichten gerendert wurden, was auch nicht nützlich war. Deshalb habe ich sie so kombiniert, dass DoCheck im Grunde angibt, AfterViewCheckedob es aufgerufen werden sollscrollToBottom .

Freut mich über 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%

Die Antwort von Vivek hat bei mir funktioniert, hat jedoch dazu geführt, dass sich ein Ausdruck geändert hat, nachdem der Fehler überprüft wurde. Keiner der Kommentare hat bei mir funktioniert, aber ich habe die Strategie zur Änderungserkennung geändert.

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

Im Winkel mit Material Design Sidenav musste ich Folgendes verwenden:

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

Nachdem Sie andere Lösungen gelesen haben, ist die beste Lösung, die ich mir vorstellen kann, sodass Sie nur das ausführen, was Sie benötigen: Sie verwenden ngOnChanges, um die richtige Änderung zu erkennen

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

}

Und Sie verwenden ngAfterViewChecked, um die Änderung tatsächlich zu erzwingen, bevor sie gerendert wird, aber nachdem die volle Höhe berechnet wurde

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

Wenn Sie sich fragen, wie Sie scrollToBottom implementieren sollen

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