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

您可以尝试这样的事情

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

 }

Answer 2

我通过改变＆＃39; AfterViewInit＆＃39;的生命周期钩子来修复它。到＆＃39; afterViewChecked＆＃39;事件

Answer 3

另外，如果您需要向下滚动一次，我建议您使用下一个解决方案：

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

自动滚动到底部指令在角度2中不起作用

3 个答案: