为什么在Angular[duplicate]中ngOnInit方法中存在未定义的元素

Question

我在ngOnInit方法中初始化一个库，如下所示：

ngOnInit() {
this.$grid = jQuery('.grid').masonry({
  // options
  itemSelector: '.grid-item',//,
  columnWidth: 384,
  gutter: 24
});
......
}

然后我在ngOnInit内部从该实例调用此方法：

 // bind event listener
this.$grid.on( 'layoutComplete',function onLayout() {
  console.log(this.$grid);     
} );

所以它的方法最终看起来像这样：

ngOnInit() {
this.$grid = jQuery('.grid').masonry({
  // options
  itemSelector: '.grid-item',//,
  columnWidth: 384,
  gutter: 24
});

 // bind event listener
this.$grid.on( 'layoutComplete',function onLayout() {
  console.log(this.$grid);     
} );

}

但是我不明白为什么console.log打印的结果是未定义的，如果实际上是这样的话。调用console.log的$grid。

我需要在该方法中再次使用该实例来执行以下操作：

// bind event listener
this.$grid.on( 'layoutComplete',function onLayout() {
  this.$grid.masonry('layout');
} );

但我不能，因为在这个方法中，$grid是未定义的，这对我来说毫无意义。

有什么想法吗？

Answer 1

尝试在AfterViewInit回调生命周期内调用这些。

ngAfterViewInit(): void {
  this.$grid = jQuery('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 384,
  gutter: 24
 });
 this.$grid.on( 'layoutComplete',() => {
  console.log(this.$grid);     
 });
}

NgAfterViewInit（）：Angular初始化组件的视图和子视图后响应。在第一个ngAfterContentChecked（）之后调用一次。仅组件钩子。

参见角度文档https://angular.io/guide/lifecycle-hooks

Answer 2

这是因为您绑定事件的方式。

在您的代码中，此是指您传递给函数上的匿名函数的执行上下文（例如自身）。

如果要保留此的上下文，必须使用箭头函数，如下所示：

this.$grid.on( 'layoutComplete', () => {
    this.$grid.masonry('layout');
});