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

Question

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

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

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

Answer 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)">

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

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

constructor(private cdRef:ChangeDetectorRef) {}

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