如何在添加元素时滚动到NgFor中元素的底部？ 从'@angular/core'导入{Component，Input，AfterViewInit，ViewChild}； @组成部分({ 选择器：“你好”， 模板：`Hello{{name}}！ 填料 添加更多 `, 样式：[`h1{font-family:Lato；}`] }) 导出类HelloComponent实现AfterViewInit{ @Input（）名称：string； @ViewChild（'commentDetailWrapper'，{static:false}）commentDetailWrapper； 轴=阵列（10）； 添加（）{ 这个.axes.push（数组（1））； const el:htmldevelement=this.commentDetailWrapper.nativeElement； el.scrollTop=el.scrollHeight； } ngAfterViewInit（）{ const el:htmldevelement=this.commentDetailWrapper.nativeElement； el.scrollTop=el.scrollHeight； } }

这在默认情况下起作用。它滚动到最后一个元素。当我通过单击

addmore

按钮添加新元素时，如何滚动到底部

下面是在演示中遇到的问题

---

所需结果：单击“添加更多”按钮时滚动到底部

超时后执行滚动可解决问题。因为在尝试滚动时视图不会更新

解决方案1: 使用选中的

afterview

hook

import { Component, Input, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>

  <div #commentDetailWrapper style="height: 100px; border: 1px solid; width: 100px; overflow-y:scroll ">

<div *ngFor="let axe of axes"><button>Filler</button></div>

  </div>
  <button (click)='add()'>Add More</button>


  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements AfterViewInit {
  @Input() name: string;
  @ViewChild('commentDetailWrapper', { static: false }) commentDetailWrapper;

  axes = Array(10);

  add() {
    this.axes.push(Array(1));
    const el: HTMLDivElement = this.commentDetailWrapper.nativeElement;
    el.scrollTop = el.scrollHeight;
  }

  ngAfterViewInit() {
    const el: HTMLDivElement = this.commentDetailWrapper.nativeElement;
    el.scrollTop = el.scrollHeight;
  }

}

解决方案2: 使用

setTimeout

export class HelloComponent implements AfterViewInit, AfterViewChecked {
added:boolean;
 ...
   add() {
    this.axes.push(Array(1));
    this.added = true;
  }

  ngAfterViewChecked() {
   // run only when new axe is added
   if(this.added) {
    const el: HTMLDivElement = this.commentDetailWrapper.nativeElement;
    el.scrollTop = el.scrollHeight;
    this.added = false;
   }
  }
...
}

解决方案1a: 分离组件并使输入数据不可变。用于实现的

ChangeDetectionStrategy.OnPush

---

查看EventEmitter或Behavior子对象。@a.Sharma我应该在什么时候发出事件，什么时候捕获它？每次添加到数组时都发出事件。。在添加结束时function@A.Sharma我想那不管用你试过了吗？发出/订阅事件是RxJS/Angular的一个非常核心的概念。添加到阵列时发出，订阅函数应处理滚动逻辑。您可能需要将它与NgZone结合起来，但它肯定会起作用。这两种方法都会起作用。OP可能对此感兴趣：

ngAfterViewChecked

对我不起作用，因为它会在任何dom更改时触发e.x，在调整窗口大小时也会滚动到底部，

setTimeout

有效，但如果有更好的方法可以不用它，我会等待setTimeout@NathanielJohnson没有得到you@dota2prosetTimeout将是答案。浏览器需要处理DOM操作，因为它不是同步的。setTimeout不带值是在异步堆栈上的所有操作完成后在其上推送操作的技巧。这篇文章讨论了实现这一点的其他方法。严格地说，这里是我的观点，但我认为你应该用自己的事件将内部元素作为自己的组成部分。通过使用DOM元素，您的代码很难维护，而不是真正创建一个有角度的应用程序。公正的意见：）

...
add() {
   this.axes.push(Array(1));
   const el: HTMLDivElement = this.commentDetailWrapper.nativeElement;
   setTimeout(() => {
     el.scrollTop = el.scrollHeight;
   });
}
...