Angular 2 เลื่อนไปด้านล่าง (รูปแบบการแชท)

ฉันมีชุดส่วนประกอบเซลล์เดียวภายในไฟล์ ng-forลูป

ฉันมีทุกอย่างเรียบร้อย แต่ดูเหมือนจะคิดไม่ออก

ปัจจุบันฉันมี

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

แต่จะไม่ได้ผลตลอดเวลาเนื่องจากรูปภาพดันวิวพอร์ตลงแบบอะซิงโครนัส

วิธีใดที่เหมาะสมในการเลื่อนไปที่ด้านล่างของหน้าต่างแชทใน Angular 2

ฉันมีปัญหาเดียวกันฉันใช้ a AfterViewCheckedและ@ViewChildชุดค่าผสม (Angular2 beta.3)

ส่วนประกอบ:

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

แม่แบบ:

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

แน่นอนว่านี่เป็นเรื่องพื้นฐานทีเดียว AfterViewCheckedทริกเกอร์ทุกครั้งมุมมองที่ถูกตรวจสอบ:

ใช้อินเทอร์เฟซนี้เพื่อรับการแจ้งเตือนทุกครั้งหลังจากตรวจสอบมุมมองส่วนประกอบของคุณ

หากคุณมีช่องป้อนข้อมูลสำหรับการส่งข้อความเช่นเหตุการณ์นี้จะเริ่มทำงานหลังจากการกดปุ่มแต่ละครั้ง (เพียงเพื่อยกตัวอย่าง) แต่ถ้าคุณบันทึกว่าผู้ใช้เลื่อนด้วยตนเองหรือไม่แล้วข้ามไปscrollToBottom()คุณก็ไม่เป็นไร

ทางออกที่ง่ายและดีที่สุดคือ:

เพิ่ม#scrollMe [scrollTop]="scrollMe.scrollHeight"สิ่งง่ายๆนี้ที่ด้านเทมเพลต

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

นี่คือลิงค์สำหรับWORKING DEMO (พร้อมแอพแชทดัมมี่) และรหัสเต็ม

จะทำงานร่วมกับ Angular2 และไม่เกิน 5 เนื่องจากการสาธิตด้านบนจะทำใน Angular5

บันทึก :

สำหรับข้อผิดพลาด: ExpressionChangedAfterItHasBeenCheckedError

โปรดตรวจสอบ css ของคุณมันเป็นปัญหาของด้าน css ไม่ใช่ด้าน Angular หนึ่งในผู้ใช้ @KHAN ได้แก้ไขโดยการลบออกoverflow:auto; height: 100%;จากdivไฟล์. (โปรดตรวจสอบการสนทนาเพื่อดูรายละเอียด)

ฉันเพิ่มการตรวจสอบเพื่อดูว่าผู้ใช้พยายามเลื่อนขึ้นหรือไม่

ฉันจะทิ้งสิ่งนี้ไว้ที่นี่ถ้าใครต้องการ :)

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

และรหัส:

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

}

คำตอบที่ยอมรับจะเริ่มทำงานในขณะที่เลื่อนดูข้อความซึ่งจะหลีกเลี่ยงสิ่งนั้น

คุณต้องการเทมเพลตแบบนี้

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

จากนั้นคุณต้องการใช้คำอธิบายประกอบ ViewChildren เพื่อสมัครรับข้อมูลองค์ประกอบข้อความใหม่ที่เพิ่มเข้ามาในเพจ

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

ลองใช้

.scrollIntoView()

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

หากต้องการความแน่ใจว่าคุณกำลังเลื่อนไปจนสุดหลังจาก * ngFor เสร็จแล้วคุณสามารถใช้สิ่งนี้ได้

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

ที่สำคัญที่นี่"ล่าสุด"กำหนดตัวแปรถ้าคุณอยู่ในขณะนี้ที่รายการสุดท้ายเพื่อให้คุณสามารถเรียก"scrollToBottom"วิธีการ

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

แบ่งปันวิธีแก้ปัญหาของฉันเนื่องจากฉันไม่พอใจอย่างสมบูรณ์กับส่วนที่เหลือ ปัญหาของฉันAfterViewCheckedคือบางครั้งฉันกำลังเลื่อนขึ้นและด้วยเหตุผลบางอย่างเบ็ดชีวิตนี้ถูกเรียกและมันก็เลื่อนฉันลงแม้ว่าจะไม่มีข้อความใหม่ก็ตาม ฉันพยายามใช้OnChangesแต่นี้เป็นปัญหาซึ่งนำฉันไปนี้การแก้ปัญหา น่าเสียดายที่ใช้อย่างเดียวDoCheckมันเลื่อนลงก่อนที่ข้อความจะถูกแสดงซึ่งไม่มีประโยชน์ดังนั้นฉันจึงรวมเข้าด้วยกันเพื่อให้ DoCheck โดยทั่วไประบุAfterViewCheckedว่าควรเรียกscrollToBottomหรือไม่

ยินดีรับคำติชม.

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 ใช้ได้ผลสำหรับฉัน แต่ส่งผลให้นิพจน์เปลี่ยนไปหลังจากตรวจสอบข้อผิดพลาด ไม่มีความคิดเห็นใดที่ใช้ได้ผลสำหรับฉัน แต่สิ่งที่ฉันทำคือเปลี่ยนกลยุทธ์การตรวจจับการเปลี่ยนแปลง

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

ในเชิงมุมโดยใช้การออกแบบวัสดุ sidenav ฉันต้องใช้สิ่งต่อไปนี้:

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

หลังจากอ่านวิธีแก้ปัญหาอื่น ๆ แล้วทางออกที่ดีที่สุดที่ฉันคิดได้ดังนั้นคุณจึงเรียกใช้เฉพาะสิ่งที่คุณต้องการมีดังต่อไปนี้: คุณใช้ ngOnChanges เพื่อตรวจจับการเปลี่ยนแปลงที่เหมาะสม

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

}

และคุณใช้ ngAfterViewChecked เพื่อบังคับใช้การเปลี่ยนแปลงจริงก่อนที่จะแสดงผล แต่หลังจากคำนวณความสูงเต็มแล้ว

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

หากคุณสงสัยว่าจะใช้ scrollToBottom ได้อย่างไร

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