Angular 是否可以在悬停时不可见地预加载和渲染角度2视图？

是否可以在悬停时不可见地预加载和渲染视图

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

<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>

单击展开项目#1。悬停此项目时，应用程序项目详细信息应预加载和预呈现，但尚未显示。
此视图包含项目#1的图像和大量内容，应在悬停应用程序项目预览组件时进行预渲染，以最小化延迟。

我使用dev工具进行了检查，正是这个复杂细节视图的dom呈现在单击和呈现完成的组件之间引入了最大的延迟。我想知道是否有可能在用户悬停该视图时将其隐藏，然后在他/她单击该视图时将其显示

---

除了呈现dom元素外，细节视图还可能包含嵌入式YouTube播放器和一些从服务器加载的图像。在鼠标悬停时加载所有内容将大大加快应用程序的速度。

我认为关键在于你需要为你的

使用两个不同的属性。您的

*ngIf

应该查看是应该显示细节还是应该预先呈现内容。如果尚未显示详细信息，则还应使用将

显示

属性设置为

无

。如下所示：

单击展开项目#1。悬停此项目时，应用程序项目详细信息应预加载和预呈现，但尚未显示。
此视图包含项目#1的图像和大量内容，应在悬停应用程序项目预览组件时进行预渲染，以最小化延迟。

我认为关键在于您需要为

使用两个不同的属性。您的

*ngIf

应该查看是应该显示细节还是应该预先呈现内容。如果尚未显示详细信息，则还应使用将

显示

属性设置为

无

。如下所示：

单击展开项目#1。悬停此项目时，应用程序项目详细信息应预加载和预呈现，但尚未显示。
此视图包含项目#1的图像和大量内容，应在悬停应用程序项目预览组件时进行预渲染，以最小化延迟。

真是个好主意！但不显示：无导致元素根本不渲染？我读过一些技巧，当你想让元素渲染但不显示时，你可以使用一些矩形剪辑或将元素移动到-9999px的绝对位置来隐藏它们。我会试试这些，然后寄回来。非常感谢！：）真是个好主意！但不显示：无导致元素根本不渲染？我读过一些技巧，当你想让元素渲染但不显示时，你可以使用一些矩形剪辑或将元素移动到-9999px的绝对位置来隐藏它们。我会试试这些，然后寄回来。非常感谢！：）