简体繁体 English

Angular 1.6页面上相同组件的许多实例

[英]Angular 1.6 many instances of the same component on a page

原文 2017-03-10 17:44:13 5 1 javascript/ angularjs/ components

I have a component inside an ng-repeat , and sometimes it creates a really big number of components (over 1000), causing a significant delay (several seconds) on page load. 我在ng-repeat有一个组件，有时它会创建非常多的组件（超过1000个），导致页面加载时出现明显的延迟（几秒钟）。 Profiler shows that all code that causes noticeable delay is executed inside angular or angular-select (which is used by my custom component), so it's not related to my code, although it might be related to some watches that I'm setting. Profiler显示导致明显延迟的所有代码都在angular或angular-select（我的自定义组件使用）中执行，因此它与我的代码无关，尽管它可能与我正在设置的某些手表有关。

What is the common way of dealing with this? 处理这个问题的常用方法是什么？ Is it possible to initialize a component only once and create multiple instances without calling the same code thousands of times? 是否可以只初始化一个组件并创建多个实例而无需多次调用相同的代码？

1 个解决方案

Usually a component cannot be initialized once and cloned. 通常，组件不能初始化一次并克隆。 It would be possible for purely static component, but compilation wouldn't be a bottleneck for this case. 纯静态组件是可能的，但编译不会成为这种情况的瓶颈。

When there's a significant number of component/directive instances that should be necessarily displayed simultaneously, they have to be modified to not use data binding if possible, or use one-time watchers. 如果有大量的组件/指令实例必须同时显示，则必须修改它们以尽可能不使用数据绑定，或者使用一次性观察器。 This way watchers count stays within a desirable limit (usually ~1000 watchers). 这种方式观察者将数量保持在理想的限度内（通常约为1000名观察者）。

Custom solutions can be used instead of ng-repeat for performance boost. 可以使用自定义解决方案代替ng-repeat来提高性能。 And 1000 components preferably shouldn't be displayed at once. 并且最好不要一次显示1000个组件。

There are several infinite scroll solutions for Angular that limit the items to the ones that are shown in visible area. Angular有几种无限滚动解决方案，可以将项目限制为可见区域中显示的项目。