Question

我有一个ngFor，有很多元素被渲染，我想显示一个微调器，而这些项目不仅被加载，而且还被渲染。

我知道如何在从服务器加载项目时显示微调器（即可观察对象），但在我的情况下只需要一点时间。我可以看到大部分时间是由浏览器渲染所有ngFor元素而花费的，我不知道如何确保仍然为此过程显示微调器。我尝试了ngAfterViewChecked生命周期钩子，但那也是在ngFor完成之前触发的。

所以我想知道有没有办法加入这个过程？或者我们可以强制Angular2 /浏览器逐步显示ngFor个项目吗？即显示正在渲染的项目，而不是在创建模板后立即显示所有项目。

我正在使用Angular 2.0.0。任何帮助表示赞赏。

Answer 1

我真的很晚才来这里。在寻找其他东西时，偶然发现了这个老问题。

问题可能出在（而过去）trackBy缺失。这是一个经常被忽略的参数，但是对于拥有出色的ngFor至关重要。

trackBy用于从传递给ngFor的可枚举序列中的每个项目中提取唯一标识符：

<!-- trackById is a method in the component -->
<div *ngFor="let item of items; trackBy: trackById"></div>

// the signature of a trackBy method is fixed and as follows
trackById(index: number, item: any): any {
  // you can track by index, by item, by a property. In this sample we track the
  // items via an 'id' property
  return item.id;
}

在没有trackBy函数的情况下，触发的每个更改检测都将破坏并重新创建整个列表。因此，如果您几乎同时有许多可观察的触发，则对于每个可观察的触发，整个ngFor都会重新创建一次。
设置好trackBy之后，每次检测到更改时，ngFor指令都不会破坏和重新创建所有内容，而只会更新更改的项目，删除必须删除的内容并插入新的项目。

一篇不错的文章，描述了一些用例： https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

API参考文档： https://angular.io/api/common/NgForOf

Answer 2

我还没有演示，但想分享方向我正在寻找解决方案 - 这可能有助于任何人绊倒这个问题。

使用Angular Universal进行服务器端呈现。由于我的应用程序非常复杂，我会针对每个请求在Web服务器上动态重新呈现我的应用程序。因此，我想象在Angular Universal的上下文中为每个请求运行我的应用程序代码。

不幸的是，Angular Universal Overview州

Angular Universal最初是为了与node.js一起构建的后端。最流行的node.js服务器端有适配器 Express或Hapi.js等框架。除了node.js之外，但是，Angular Universal具有ASP.NET Core支持。在附近未来我们希望增加对Java，PHP和Python的支持。

但是，Google会提供Node.js on their Cloud Platform。所以现在我想在云中使用Node.js然后使用Angular Universal来服务器端渲染我的应用程序。

我似乎并不是唯一一个在App Engine上考虑Angular Universal的人：Angular4 serverside-rendering on google-app-engine standard

另一个可能有用的资源：Server-Side Rendering in Angular 2 with Angular Universal。

用于ngFor的Angular2微调器

2 个答案: