为什么 Angular 中的 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 打印的结果是未定义的，如果实际上是 this.$grid 谁在调用 console.log.

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

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

但我不能，因为 this.$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(): Respond after Angular initializes the component's views and child views. Called once after the first ngAfterContentChecked(). A component-only hook.

请参阅 angular 文档 https://angular.io/guide/lifecycle-hooks

Answer 2

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

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

如果您想保留 this 的上下文，您必须使用这样的 arrow function：

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

为什么 Angular 中的 ngOnInit 方法中有未定义的元素

Why undefined elements inside ngOnInit method in Angular

jquery

masonry

angular