Question

是否有可能在悬停时无形地预加载和渲染视图？

我有一个列出项目的应用。每个项目都是自己的组件，当您单击任何这些项目时，它将被替换为同一项目的详细视图（另一个组件）。像这样：

<app-item-preview [id]="1" *ngIf="!shouldShowDetailView(1)">
Click to unfold item #1. Upon hovering this item, app-item-detail should be preloaded and prerendered but not yet shown.
</app-item-preview>

<app-item-detail [id]="1" *ngIf="shouldShowDetailView(1)">
This view contains images and lots of content for item #1 and should be pre-rendered upon hovering the app-item-preview-component to minimize latency.
</app-item-detail>

我查看了dev-tools，它是这个复杂细节视图的dom渲染，它引入了点击和正在渲染的完成组件之间的最大延迟。我想知道当用户将鼠标悬停时，是否可以使Angular渲染此视图已隐藏，然后只需在用户点击它时显示它？

除了渲染dom元素之外，详细视图还可能包含嵌入式YouTube播放器和从服务器加载的一些图像。在悬停时加载所有内容会非常加快应用程序的速度。

Answer 1

我认为您的关键是您需要为<app-item-detail>使用两种不同的属性。您的*ngIf应该查看是否应显示详细信息或是否应预先呈现内容。如果还没有显示详细信息，您还应该使用display属性设置为none。如下所示：

<app-item-preview [id]="1" *ngIf="!shouldShowDetailView(1)" (hover)="preRenderDetailView(1)" (click)="showDetailView(1)">
    Click to unfold item #1. Upon hovering this item, app-item-detail should be preloaded and prerendered but not yet shown.
</app-item-preview>

<app-item-detail [id]="1" *ngIf="shouldShowDetailView(1) || shouldPreRenderDetailView(1)" [style.display]="shouldShowDetailView(1) ? '' : 'none'">
    This view contains images and lots of content for item #1 and should be pre-rendered upon hovering the app-item-preview-component to minimize latency.
</app-item-detail>

可以在悬停时无形地预加载和渲染Angular2视图吗？

1 个答案: