自動スクロール・ボトム・ディレクティブはアングル2では機能しません

Question

私はテキスト・メッセージの下に自動スクロールを実装する必要があるチャット・アプリケーションを作成しています。 divは、ページの初期ロードと再ロード時に実行する必要があります。私はこれを実装するカスタムディレクティブを作成しました。しかし、これは動作していないようです。

ディレクティブ：

import { Directive,ElementRef,AfterViewInit} from '@angular/core'; 


@Directive({ selector: '[scrollToBottom]' }) 
export class ScrollToBottomDirective implements AfterViewInit { 
    constructor(private element:ElementRef) { 
     console.log('scroll', this.element); 
    } 
    ngAfterViewInit(){ 
     this.scrollToBottom(); 
    } 
    scrollToBottom(){ 
     if(this.element){ 
      (this.element as any).nativeElement.scrollTop =(this.element as any).nativeElement.scrollHeight; 
      console.log('scroll', (this.element as any).nativeElement.scrollTop) 
      console.log('scrollHeight', (this.element as any).nativeElement.scrollHeight) 
     } 
    } 
} 

私が間違っているの？

Answer 1

あなたは私はあなたが一度下にスクロールする必要がある場合は、

Answer 2

ような何かを試すことができます次の推奨ソリューション：

import { Directive, ElementRef, AfterViewChecked, HostListener } from '@angular/core'; 

@Directive({ 
    selector: '[scrollToBottom]' 
}) 
export class ScrollToBottomDirective implements AfterViewChecked { 
    isActive = true; 

    @HostListener('scroll') onFrameScroll() { 
    this.isActive = false; 
    } 

    constructor(private element: ElementRef) {} 

    ngAfterViewChecked() { 
    this.scrollToBottom(); 
    } 

    scrollToBottom() { 
    if (this.element && this.isActive) { 
     this.element.nativeElement.scrollTop = this.element.nativeElement.scrollHeight; 
    } 
    } 
} 

Answer 3

また「afterViewChecked」イベントに「AfterViewInit」私からのライフサイクルフックを変更することによって、それを修正し、この

ScrollToBottom() { 
    if(this.element){ 
     // I can't remember why I added a short timeout, 
     // the below works great though. 
     if(this.element != undefined){ 
      setTimeout(() => { element.scrollIntoView(true) }, 200); 
     } 
    } 

}