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