Angular 8：等待上一页的数据加载然后填充当前页面上的字段

Question

在我的应用程序中，我在组件 A 中获取大量数据并路由到组件 B 并传递一些数据以加载少量图表。 由于数据量很大，因此获取数据需要时间，有时用户可能会在没有数据的情况下路由到 Component-B，因此会引发错误。 我可以在 Component-B 上等待，直到获取所有数据并在页面上显示图形的加载选项，直到获取该数据。获取数据后，将填充此图表。 我可以使用网络工作者来实现这一点吗？

Answer 1

您可以使用的选项：

1. 您可以将数据保存在浏览器的本地存储中并从那里使用。不要传递数据。传递密钥以访问本地存储中的数据。将压缩数据保存在本地存储中。
2. 不要一次加载所有数据。分块加载。通过可管理的小型 HTTP 请求在需要块时加载。需要一些数据工程和数据处理工程。如果主数据集很大，您应该单独加载组件 B 所需的数据。
3. 如果不需要在组件 A 中使用数据，请不要在组件 A 中加载数据。仅在实际需要的地方加载数据。在本地缓存数据以跨组件工作。
4. 使用ngx-cacheable 缓存响应。或者，通过任何其他库缓存响应。
5. 使用像 redux 这样的存储来为您提供数据。需要一个学习周期。
6. 使用angular singleton service为您携带数据。
7. 使用反应形式和cache data with observables。 Web 的原则是在首次加载时仅显示屏幕可见部分的数据。滚动后将显示在浏览器中的部分可以稍后加载数据。仅在需要在屏幕上使用时才加载数据。
8. Web Workers 用于 CPU 密集型的事情。获取数据可能不是 CPU 密集型的。 Service workers 充当网络代理。它们拦截应用程序发出的所有传出 HTTP 请求，并可以选择如何响应它们。例如，他们可以查询本地缓存并提供缓存响应（如果可用）。 Angular Service Worker 可以从一些缓存（Redis、API 缓存）中获取这些数据。如果您尝试在调用时生成大量数据，则生成它会花费更多时间。将数据加载到前端应用程序通常会使用 gzip 数据，并且浏览器知道如何使用 gzip 格式。