在 Angular 2+ 中将元素添加到 ngFor 后，如何运行一些代码？答案

【问题标题】：How do you run some code after an element is added to ngFor in Angular 2+?在 Angular 2+ 中将元素添加到 ngFor 后，如何运行一些代码？
【发布时间】：2018-02-05 09:13:48
【问题描述】：

我的组件中有一个函数，可以将元素添加到视图中由 *ngFor 显示的数组。

我希望通过 id 来定位添加的元素，并在将其添加到数组后滚动到它。问题是这段代码在元素添加到视图之前运行。

如何在 Angular 2+ 中解决这个问题？

【问题讨论】：

这仅仅是关于初始添加还是如果您将项目添加到您使用*ngFor on 的数组？
当你将项目添加到我使用*ngFor on的数组时

标签： javascript angular ngfor

【解决方案1】：

您可以使用执行通知的自定义指令：

@Directive({ selector: '[afterAdd]')
class MyDirective {
  @Output() added:EventEmitter = new EventEmitter();
  ngAfterContentInit() {
    this.added.next(null);
  }
}

并像这样使用它：

<div *ngFor="let item of items" afterAdd (added)="doSomething(item)">

这样*ngFor添加的每个项目都会调用父组件上的doSomething()（也用于数组中所有项目的初始添加）

或者，您还可以确保将项目添加到 DOM 中，例如

constructor(private cdRef:ChangeDetectorRef) {}

...
this.items.push(newItem);
this.cdRef.detectChanges(); // sync
// here the item was added to the DOM already

【讨论】：

很好的解决方案。但是，我不想在所有项目的初始添加上运行它。仅当将一项添加到现有列表中时，我才想向下滚动到最后一项。
太棒了！你的第二种方法很有用，就像一个魅力。谢谢。
很高兴听到:)