ngOnChanges 不停地触发并使应用程序不响应

Question

我构建了一个名为 "gw-responsive-tabs" 的组件，它有一个带有变量 (navLinks) 的输入，它是我要显示的选项卡的数组。当我像这样从 html 传送输入数据时：

<gw-responsive-tabs
  [navLinks]="[{ label: 'PENDING', path: '/mentoring/manage/pending' },
  { label: 'CURRENT', path: '/mentoring/manage/pending' }]">
</gw-responsive-tabs>

然后一切正常，我可以看到 2 个标签。

如果我更改它并使用 getter 或函数发送相同的数据，那么 gw-responsive-tabs 组件的 ngOnChanges 会以非常高的频率不间断地触发，从那时起 chrome 没有响应。

get mentoringTabs(): Array<any> {
  return [{ label: 'PENDING', path: '/mentoring/manage/pending' }, { label: 'CURRENT', path: '/mentoring/manage/pending' }];
}

和html：

<gw-responsive-tabs [navLinks]="mentoringTabs"></gw-responsive-tabs>

知道是什么导致了这种现象吗？

Answer 1

这是因为更改检测默认策略，它每秒钟左右检查一次，无论 return 对象的值是否更改，它都会重新渲染模板，因此每次都会重新渲染模板它正在重新呈现 html 它正在调用 get 方法，该方法 return 每次被调用时都是一个新对象，当 ngOnChanges 比较它时，它的值是一个新对象，现在它在循环中运行。

这里是 link 变化检测的工作原理 https://angular-2-training-book.rangle.io/handout/change-detection/angular_1_vs_angular_2.html

ngOnChanges 不停地触发并使应用程序不响应

ngOnChanges fires nonstop and makes application not to repond

ngonchanges

lifecycle-hook

angular