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

ngOnChanges fires nonstop and makes application not to repond

我构建了一个名为 "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>

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

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

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