Açısal 2 Aşağı kaydır (Sohbet stili)

Bir ng-fordöngü içinde bir dizi tek hücre bileşenim var .

Her şeyim yerinde ama doğru olanı bulamıyorum

Şu anda sahibim

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

Ancak, görüntüler eşzamansız olarak görüntü alanını aşağı ittiğinden, bu her zaman çalışmaz.

Angular 2'de bir sohbet penceresinin altına kaydırmanın uygun yolu nedir?

Aynı sorunu yaşadım, bir AfterViewCheckedve @ViewChildkombinasyonunu kullanıyorum (Angular2 beta.3).

Bileşen:

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

Şablon:

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

Elbette bu oldukça basit. AfterViewCheckedGörünümü kontrol edildi her zaman tetikler:

Bileşeninizin görünümü her kontrol edildikten sonra bildirim almak için bu arayüzü uygulayın.

Örneğin, mesaj göndermek için bir giriş alanınız varsa, bu olay her tuşlamadan sonra tetiklenir (sadece bir örnek vermek gerekirse). Ama kullanıcı el kaydırılan olmadığını kaydedebilir ve daha sonra atlarsanız scrollToBottom()olman gereken cezayı.

Bunun için en basit ve en iyi çözüm şudur:

Bu #scrollMe [scrollTop]="scrollMe.scrollHeight"basit şeyi Şablon tarafına ekleyin

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

İşte ÇALIŞMA DEMOSU (Kukla sohbet uygulaması ile) VE TAM KOD bağlantısı

Angular2 ile çalışacak ve ayrıca 5'e kadar, Yukarıdaki demo Angular5'te yapılır.

Not :

Hata için: ExpressionChangedAfterItHasBeenCheckedError

Lütfen css'nizi kontrol edin, bu bir css tarafı sorunu, Açısal taraf değil, @KHAN kullanıcılarından biri bunu ' overflow:auto; height: 100%;dan kaldırarak çözdü div. (ayrıntılar için lütfen konuşmaları kontrol edin)

Kullanıcının yukarı kaydırmayı deneyip denemediğini görmek için bir kontrol ekledim.

Biri isterse bunu burada bırakacağım :)

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

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

}

Kabul edilen cevap, mesajlar arasında gezinirken tetiklenir, bu bundan kaçınır.

Bunun gibi bir şablon istiyorsunuz.

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

Ardından sayfaya eklenen yeni mesaj öğelerine abone olmak için bir ViewChildren ek açıklaması kullanmak istiyorsunuz.

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

Kullanmayı düşünün

.scrollIntoView()

Bkz. Https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

* NgFor bittikten sonra sonuna kadar ilerlediğinizden emin olmak istiyorsanız, bunu kullanabilirsiniz.

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

Burada önemli olan "son" değişken, şu anda son öğede olup olmadığınızı tanımlar, böylece "scrollToBottom" yöntemini tetikleyebilirsiniz.

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

Çözümümü paylaşıyorum, çünkü geri kalanından tamamen memnun değildim. Benim sorunum AfterViewChecked, bazen yukarı kaydırıyorum ve bazı nedenlerden dolayı, bu yaşam kancası çağrılıyor ve yeni mesaj olmasa bile beni aşağı kaydırıyor. Kullanmayı denedim OnChangesama bu beni bu çözüme götüren bir sorundu . Ne yazık ki, yalnızca kullanarak DoCheck, mesajlar işlenmeden önce aşağı kaydırılıyordu, bu da yararlı değildi, bu yüzden onları birleştirdim, böylece DoCheck temelde AfterViewCheckedçağrı yapıp yapmayacağını belirtiyor scrollToBottom.

Geri bildirim almaktan mutluluk duyarız.

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%

Vivek'in cevabı benim için işe yaradı, ancak hata kontrol edildikten sonra bir ifadenin değişmesine neden oldu. Yorumların hiçbiri benim için işe yaramadı, ancak yaptığım şey değişiklik tespit stratejisini değiştirmekti.

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

Açısal malzeme tasarımında sidenav kullanımında aşağıdakileri kullanmak zorunda kaldım:

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

Diğer çözümleri okuduktan sonra, aklıma gelen en iyi çözüm, sadece ihtiyacınız olanı çalıştırmanız için şudur: Doğru değişikliği tespit etmek için ngOnChanges kullanıyorsunuz

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

}

Değişimi oluşturmadan önce ancak tam yükseklik hesaplandıktan sonra gerçekten zorlamak için ngAfterViewChecked kullanırsınız.

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

ScrollToBottom'un nasıl uygulanacağını merak ediyorsanız

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