angular - Alta kaydırma; scrollTop=scrollHeight çok erken mi çalışıyor?

Canlı örnek: https://angular-txvcna.stackblitz.io/ (Kod).

Bir "sohbet" bileşenim var ve her mesaj eklendiğinde div'in alta kaymasını istiyorum.

Bir öğeyi bir diziye ekleyerek yeni bir mesaj ekliyorum (this.messages.push(message)) ve hemen ardından aşağı kaydırmaya çalışıyorum. Görünüşe göre kaydırma işlemi this.chatboxBody.nativeElement.scrollTop=this.chatboxBody.nativeElement.scrollHeight; Angular'ın yaşam döngüsü kancalarından önce oluyor, çünkü yürütüldüğünde scrollHeight yüksekliğin eski değerine sahip.

Şu anda bunu düzeltmek için setTimeout kullanıyorum, ama bu gerçekten bir kestirme gibi hissettiriyor. Bunu nasıl düzeltebilirim? (İdeali - alt bileşeni güncelleyen kanca ile bir şekilde abone olmak)

Cevap #1

Bir kaç fikrim var:

1. Mesajları girdiyi bir setter haline getirebilirsiniz, böylece mesaj girildiğinde mesajın özel bir versiyonunu ayarlar ve kaydırmayı bileşen içinde ele alır. (Kişisel olarak bana göre bu en iyi çözüm gibi görünüyor, çünkü bu sayede aşağı kaydırma mantığı, bu bileşenin kullanıldığı her yerde tekrarlanmak zorunda kalmaz)

    private _message: VivrMessage;
        @Input()
            set message(val: VivrMessage){
        if (val){
            this._message = val;
            this.handleScrolling();
        }
    }

2. Yukarıdakine benzer bir şey yapabilirsiniz, ancak kaydırmayı mesajlar bileşeninde yönetmek yerine, çıktıyı alıp işin üst bileşen tarafından yapılmasını sağlayın.