许多元素上的 ngClass 使网站非常慢

我目前正在我的 Angular 6 应用程序中制作一个树视图，我正在使用它（嵌套和所有内容）。我遇到的问题之一是，当我的页面有很多元素（几千个）并且它们都有[ngClass]在它们上（根据所选节点显示不同的颜色），页面往往会挂起很多。我创建了一个 StackBlitz 来展示我的问题：https://stackblitz.com/edit/angular-atveai https://stackblitz.com/edit/angular-atveai

要测试它，只需按住右侧输出屏幕上的向上/向下箭头键即可。它应该很慢。如果将循环设置为仅显示 100 个元素而不是 10000 个，则它可以完美运行（因为元素较少）。

为了捕获 keydown 事件（我想要在我的文档中），我这样做：

@Component({
  host: {
    '(document:keydown)': 'handleKeyboardEvent($event)'
  }
})

这称为handleKeyboardEvent()与$event object.

在 HTML 文件中，我有一个非常简单的*ngFor，其中每个元素都有一个[ngClass]="GetClass(item)"。基本上，这会返回一个包含所有应应用的类的对象。就我而言，如果所选节点等于该元素，则它设置obj["selected"] = true，这样一个元素就会得到selected class.

我想这要求相当高，因为每个元素都会多次调用这个方法。这就是我对为什么这么慢的猜测。

我的页面可以轻松拥有 5000 到 10000 个节点（如果有办法解决这个问题，我们真的不想改变这一点）。然而，根节点的数量可能在 10 到 30 之间。许多节点都是嵌套的子节点（基本上 99% 都是嵌套的）。

我的想法是停止[ngClass]从监听变化，如果父节点是NOT扩大了。未展开 = 无论如何都不显示在页面上。

所以真正的问题是：如果满足条件，是否可以阻止元素监听更改？如果是这样，会有帮助吗？因为这基本上会引入另一个听众，这并不能真正解决任何问题。

所以我明白了kinda像这样工作：

1）使用变化检测OnPush

@Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      host: {
        '(document:keydown)': 'handleKeyboardEvent($event)'
      },
      changeDetection: ChangeDetectionStrategy.OnPush
    })

2）使用模板插值代替函数调用

<span class="{{item.state === 'failed' ? 'failed' : 'completed'}} {{item.ordering === selected ? 'selected' : ''}}">{{item.name}}</span>

它在处理 5000 行时运行速度很快，但在处理 10000 行时仍然很慢。不幸的是，我已经尽力了。

https://stackblitz.com/edit/angular-1sg1mh?file=src%2Fapp%2Fapp.component.ts https://stackblitz.com/edit/angular-1sg1mh?file=src%2Fapp%2Fapp.component.ts