在单页应用（Single Page Application，SPA）中，页面的加载速度对于用户体验非常重要。为了提高用户体验，我们需要在页面加载时进行计时并提供反馈。在 Angular4 中，我们可以使用 NavigationStart 事件来实现这个功能。
NavigationStart 事件
在 Angular4 中，当路由器开始导航时，会触发 NavigationStart 事件。我们可以通过订阅这个事件来获取页面加载的开始时间。以下是一个简单的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------- --------------- - ---- ------------------
------------
--------- -----------
--------- ---------------------------------
--
------ ----- ------------ -
------------------- ------- ------- -
---------------------------------- -- -
-- ------ ---------- ---------------- -
------------------------ --- ------------------
-
---
-
-在上面的代码中，我们订阅了路由器的事件流，并检测 NavigationStart 事件。当这个事件被触发时，我们打印出了当前时间。
计算页面加载时间
在获取页面加载开始时间后，我们需要计算加载时间并提供反馈。为了计算加载时间，我们可以在 NavigationEnd 事件中获取页面加载结束时间，并计算两者的差值。以下是一个完整的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------- ---------------- ------------- - ---- ------------------
------------
--------- -----------
--------- ---------------------------------
--
------ ----- ------------ -
------- ---------- -------
------------------- ------- ------- -
---------------------------------- -- -
-- ------ ---------- ---------------- -
-------------- - --- -----------------
- ---- -- ------ ---------- -------------- -
----- ------- - --- -----------------
----- -------- - ------- - ---------------
---------------------- ----------
-
---
-
-在上面的代码中，我们使用了一个私有变量 startTime 来存储页面加载开始时间。当 NavigationStart 事件被触发时，我们将当前时间赋值给 startTime。当 NavigationEnd 事件被触发时，我们获取当前时间并计算出加载时间。
指导意义
通过在 SPA 页面加载时开始计时并提供反馈，我们可以提高用户体验并优化网站性能。我们可以将加载时间显示在页面上，或者使用其他方式来提供反馈。在实际项目中，我们可以将这个功能集成到自己的 Angular4 应用中。
结论
在本文中，我们学习了如何在 Angular4 中实现在 SPA 页面加载时开始计时的功能。我们使用了 NavigationStart 和 NavigationEnd 事件来获取页面加载时间，并提供反馈。这个功能可以提高用户体验并优化网站性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6759da737ebdbf91a6d68f42