Question

我正在尝试将webpack包含到Angular2项目中并遇到我在之前的场景中已经遇到的问题。常见的问题是我需要等到视图完全呈现然后执行某些操作。我知道有ngAfterViewInit生命周期钩子，但只在第一次呈现视图时触发。当由于组件内的数据更改而重新呈现它时，不会再次调用它。看看我的代码：

ngOnInit() {
  this.store.select('trips').subscribe(trips => {
    // forces view to re-render
    this.trips = trips;

    // doesn't work because the updated DOM doesn't exist yet
    let Packery: any = require('packery');
    new Packery(this.grid.nativeElement, {
      itemSelector: '.grid-item',
      gutter: 10
    });
  });

  this.store.dispatch(new TripActions.LoadTrips());
}

稍作修改会使代码按预期工作（大部分时间），但需要注意的是，每次加载新数据时网站看起来都非常难看，这不是解决方案。然而，它显示了问题。

ngOnInit() {
  this.store.select('trips').subscribe(trips => {
    // forces view to re-render
    this.trips = trips;


    setTimeout(() => {      
      // now it works (most of the time) because after 0.5s
      // the updated DOM elements usually exist...
      let Packery: any = require('packery');
      new Packery(this.grid.nativeElement, {
        itemSelector: '.grid-item',
        gutter: 10
      });
    }, 500);
  });    

  this.store.dispatch(new TripActions.LoadTrips());
}

Answer 1

您可能正在寻找的是ngAfterViewChecked()。这是文档中的引用。

在Angular检查组件的视图和子视图后进行响应。在ngAfterViewInit之后以及随后的每次调用 ngAfterContentChecked()。

这意味着它不仅在初始化后调用一次，而且在数据更改后调用的每个ngAfterContentChecked()之后调用。在每次通话时，您都可以检查您的数据是否已经存在，然后使用您的代码进行回复。一个问题是，即使你已经完成了Packery的事情，也可以调用它，这就是为什么你必须确保你只做一次。

查看lifecycle hook page以获取更多信息。

视图完全重新渲染后的事件挂钩

1 个答案: