Kątowy 2 Przewiń w dół (styl czatu)

Mam zestaw komponentów pojedynczej komórki w ng-forpętli.

Mam wszystko na swoim miejscu, ale nie mogę znaleźć właściwego rozwiązania

Obecnie mam

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

Ale to nie działa przez cały czas, ponieważ obrazy asynchronicznie przesuwają okno w dół.

Jaki jest właściwy sposób przewijania do dołu okna czatu w Angular 2?

Miałem ten sam problem, używam AfterViewCheckedi@ViewChild kombinacji (Angular2 beta.3).

Składnik:

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

Szablon:

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

Oczywiście jest to dość podstawowe. AfterViewCheckedWyzwala za każdym razem widok sprawdzono:

Zaimplementuj ten interfejs, aby otrzymywać powiadomienia po każdym sprawdzeniu widoku komponentu.

Jeśli masz pole wejściowe do wysyłania wiadomości, na przykład to zdarzenie jest wywoływane po każdym naciśnięciu klawisza (tylko dla przykładu). Ale jeśli zapiszesz, czy użytkownik przewinął ręcznie, a następnie pominiesz scrollToBottom(), powinno być dobrze.

Najprostszym i najlepszym rozwiązaniem jest:

Dodaj tę #scrollMe [scrollTop]="scrollMe.scrollHeight"prostą rzecz po stronie szablonu

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

Oto link do PRACY DEMO (z fałszywą aplikacją do czatu) I PEŁNY KOD

Będzie działać z Angular2, a także do 5, Jak powyżej demo jest zrobione w Angular5.

Uwaga :

W przypadku błędu: ExpressionChangedAfterItHasBeenCheckedError

Sprawdź swój css, jest to problem strony css, a nie strony Angular, Jeden z użytkowników @KHAN rozwiązał to, usuwając overflow:auto; height: 100%;z div. (proszę sprawdzić rozmowy, aby uzyskać szczegółowe informacje)

Dodałem sprawdzenie, czy użytkownik próbował przewijać w górę.

Zostawię to tutaj, jeśli ktoś tego chce :)

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

i kod:

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

}

Zaakceptowana odpowiedź odpala się podczas przewijania wiadomości, aby tego uniknąć.

Chcesz takiego szablonu.

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

Następnie chcesz użyć adnotacji ViewChildren, aby zasubskrybować nowe elementy wiadomości dodawane do strony.

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

Rozważ użycie

.scrollIntoView()

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

Jeśli chcesz mieć pewność, że przewijasz do końca po zakończeniu * ngFor, możesz użyć tego.

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

Ważne tutaj, zmienna „last” określa, czy aktualnie znajdujesz się przy ostatniej pozycji, więc możesz wywołać metodę „scrollToBottom”

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

Dzielenie się moim rozwiązaniem, ponieważ nie byłem w pełni zadowolony z reszty. Mój problem AfterViewCheckedpolega na tym, że czasami przewijam w górę iz jakiegoś powodu ten haczyk życia jest wywoływany i przewija mnie w dół, nawet jeśli nie ma nowych wiadomości. Próbowałem użyć, OnChangesale to był problem, który doprowadził mnie do tego rozwiązania. Niestety, używając tylko DoCheck, przewijało się w dół przed renderowaniem wiadomości, co też nie było przydatne, więc połączyłem je tak, aby DoCheck w zasadzie wskazywał, AfterViewCheckedczy powinien wywołaćscrollToBottom .

Chętnie otrzymam informację zwrotną

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%

Odpowiedź Viveka zadziałała dla mnie, ale spowodowała, że ​​wyrażenie zmieniło się po sprawdzeniu błędu. Żaden z komentarzy nie działał dla mnie, ale zmieniłem strategię wykrywania zmian.

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

W kątowym używaniu sidenav Material Design musiałem użyć następującego:

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

Po przeczytaniu innych rozwiązań najlepszym rozwiązaniem, które przychodzi mi do głowy, więc uruchamiasz tylko to, czego potrzebujesz, jest następujące: Używasz ngOnChanges do wykrycia właściwej zmiany

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

}

Używasz ngAfterViewChecked, aby faktycznie wymusić zmianę przed renderowaniem, ale po obliczeniu pełnej wysokości

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

Jeśli zastanawiasz się, jak zaimplementować scrollToBottom

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