角树控制复杂项目答案

【问题标题】：angular tree control complex items角树控制复杂项目
【发布时间】：2018-04-25 15:58:19
【问题描述】：

我正在使用 angular-tree-control 来实现一棵树。

在每个树项的 html 模板中有很多 ng-if 用于检查，是否应该显示图标等。此外，每个项目都包含一个创建上下文菜单的指令。

所以如果我有很多项目（>1000），树会变慢，所以我想知道实现它的更好方法是什么？

【问题讨论】：

您好，欢迎来到 StackOverflow。发布您的代码并举例说明时间问题是什么很有用，例如100 件、1000 件等？

标签： javascript angularjs performance tree

【解决方案1】：

正如@Spangen 所建议的，您的问题需要更多信息......

如果您尝试一次渲染超过 1000 个节点，您可能需要构建一个专门的解决方案（例如在 Angular 指令中）...我不知道任何通用的 AngularJS 解决方案会跟上。

如果您一开始并没有展开那么多节点，而是在您展开节点时出现问题，这使您超过了 1000 个节点，那么您可能会对 https://plnkr.co/edit/RxKuOD62Wy6PblmgzFIx 感兴趣...

即使在我当前的机器上超过 10000 个节点，它也能保持相当的响应，尽管它确实会随着内存占用的增长而变慢......因为我们不知道你的节点的复杂性，它只有 10 ng-if 的反应到树的当前级别...

模板：

  <ul dx-start-with="app.root" class="list-unstyled">
    <li ng-repeat="node in $dxPrior.nodes">
      <i class="glyphicon btn btn-primary" ng-class="node.expanded ? 'glyphicon-chevron-down':'glyphicon-chevron-right'" ng-click="app.toggle(node)"></i> {{ node.name }}

      > This is node <span ng-bind="$index"></span>
      at level <span ng-bind="$dxLevel"></span> 
      under <span ng-bind="$parent.$parent.$dxLevel"></span>

      <div ng-if="$dxLevel === 0" >ZERO</div>
      <div ng-if="$dxLevel === 1" >ONE</div>
      <div ng-if="$dxLevel === 2" >TWO</div>
      <div ng-if="$dxLevel === 3" >THREE</div>
      <div ng-if="$dxLevel === 4" >FOUR</div>
      <div ng-if="$dxLevel === 5" >FIVE</div>
      <div ng-if="$dxLevel === 6" >SIX</div>
      <div ng-if="$dxLevel === 7" >SEVEN</div>
      <div ng-if="$dxLevel === 8" >EIGHT</div>
      <div ng-if="$dxLevel === 9" >NINE</div>

      <ul ng-if="node.expanded" dx-connect="node" style="list-style-type: square"></ul>
    </li>
  </ul>

（注意，如果您使用的是较新版本的 AngularJS，那么递归指令也是一个竞争者，我认为它们可以提供更高的性能，但我不能说多少，以上是我能做到的快速对我已经放过的旧样本进行处理）

但是，如果您尝试一次渲染超过 1000 个节点，甚至会有点停滞，但我不得不问，您为什么要这样做？...作为用户，这就是我想要的吗？ t to see?...这听起来像是以树的形式一次性向用户提供大量信息的方式...

（如果它是地图上的点或其他图形，那么我可以看到显示这么多信息是有意义的，但不是在树中）...

【讨论】：