Question

我有一个Angular应用程序，根据所选标签，内容可见。带有一小部分html的标签加载速度非常快，但在一个标签中我有3个选择元素，每个元素都有大约2个来自数据库的可用选项。

单击此选项卡时，显示选项卡需要几秒钟。是否有任何解决方法可以加快加载速度？

<div *ngIf="tab=='Project'">
<select>

<option *ngFor="let item in employees>{{item.surname}}</option> 
</select>
<option *ngFor="let item in countries>{{item.shortCode}}</option> 
</select>
<option *ngFor="let item in positions>{{item.position}}</option> 
</select>
</div>

Answer 1

不。如果你有三个选择元素，每个元素有2000个选项，那就是6000个节点。它只需要一段时间就可以将它们插入到DOM中。想一想为什么你需要为用户提供2000个选项，以及它如何帮助他们填写表单。从2000个选项中选择......三次是一场噩梦！

即使你使用不同的变化检测策略，加载它们一次也需要一段时间。

Answer 2

如果select option有大量onPush，那么您应该考虑将更改后的检测策略切换为@Component({ selector: 'component', ... changeDetection: ChangeDetectionStrategy.onPush });

zone

为什么呢？好吧如果clicking将被唤醒，它将必须检查每个选项是否已更改，例如select中的onPush正在唤醒区域以检查是否有更改。但请注意，如果您切换到events，那么由于检测到的更改只会在xhr's，@Input and @Output上发生并且在{{ 1}}，但您始终可以尝试通过导入changeDetectorRef来控制它并调用detectChanges()。此article也有助于了解它的工作原理。

constructor(cdr: ChangeDetectorRef) { }

选项卡式内容加载速度非常慢

2 个答案: