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

Question

我的组件中有一个函数，它向一个数组添加一个元素，该元素在视图中由* ngFor显示。

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

我如何在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这种方式{（1）也适用于数组中所有项目的初始添加

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

constructor(private cdRef:ChangeDetectorRef) {}

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