Question

我构建了一个名称为“ gw-sensitive-tabs”的组件，该组件的输入带有变量（navLinks），该变量是我要显示的选项卡的数组。当我像这样从html传递输入数据时：

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

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

如果我更改它并使用吸气剂或函数发送相同的数据，则gw-response-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

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

这是更改检测工作原理的链接 https://angular-2-training-book.rangle.io/handout/change-detection/angular_1_vs_angular_2.html

ngOnChanges会不断触发，并使应用程序不响应

1 个答案: