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打印的结果是未定义的，如果实际上是这个。$ grid谁正在调用console.log。

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

// 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中，您指的是您传递给on函数的匿名函数的执行上下文（例如，自身）。

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

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

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

2 个答案: