Question

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

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

要捕获keydown事件（我希望在文档中找到该事件），请执行以下操作：

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

这将通过handleKeyboardEvent()对象调用$event。

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

我想这是非常苛刻的，因为每个元素多次调用此方法。这就是我为什么会这么慢的猜测。

我的页面可以轻松拥有5000到10000个节点（如果有解决方法，我们真的不想更改）。但是，根节点的数量可能在10到30之间。许多节点嵌套为子级（基本上嵌套了99％）。

如果父节点不展开，我的想法是阻止[ngClass]收听更改。未展开=仍未在页面上显示。

所以真正的问题是：如果满足条件，是否可以阻止元素监听变更？如果是这样，它甚至会有所帮助吗？这样一来，基本上会引入另一个监听器，但实际上并不能解决任何问题。

Answer 1

所以我让它 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

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

1 个答案: