随着移动互联网的普及，用户对于网页响应速度的要求也越来越高，而骨架屏可以有效地解决网页加载过程中的白屏问题，提高用户体验。在本文中，我们将了解如何使用Angular框架优雅地实现骨架屏。
什么是骨架屏？
骨架屏是指在数据还未加载完成前通过一些占位元素，在网页中模拟出一个骨架的结构，让用户看到加载的进度并且能够更好地预估页面数据的数量和位置。它通常应用于移动端APP的首屏加载过程中。
下面是一个展示如何使用骨架屏的图例：
Angular中的骨架屏
在Angular中，我们可以通过利用路由守卫来实现骨架屏的效果。以下是一个实现骨架屏的样例代码：
1. 定义路由守卫
-- -------------------- ---- -------
-------------
------ ----- ------------ ---------- ----------- -
------------------- --------- ----------
------- --- ----------- --
------------------ ----------------------- ------ -------------------- -
----- -------- - ---------------------------
----- --------- - ----------------------
----- --------- - -------------------------------------
------------------------------------------------ --------- -----------
------ -----
-
------- --------------------- -
-- --------------
-
-2. 注册路由守卫
-- -------------------- ---- ------- ----- ------- ------ - - - ----- --- ---------- -------------- ------------ ---------------- -- --- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
以上代码中，我们通过定义LoadingGuard路由守卫来向页面插入骨架屏占位元素，然后将其加入到路由中。接下来，我们将通过组件的控制来更新骨架屏内的内容。
3. 更新骨架屏内的内容
接下来，我们需要在路由变化后，更新骨架屏中的内容，我们可以在ngOnInit里做出来：
-- -------------------- ---- -------
------ ----- ------------- ---------- ------ -
------- - -----
----- --- - ---
------------------- ------------ ------------ --
---------- -
---------------------------------------- -- -
--------- - ----
------------ - ------
---
-
-通过上面代码，我们可以将数据绑定到组件中，并且一旦我们获取到数据，我们将关闭loading变量以显示真正的内容。
最后，当数据加载完成后，我们删除骨架屏占位元素：
4. 删除骨架屏占位元素
-- -------------------- ---- -------
------ ----- ------------- ---------- ------ -
------- - -----
----- --- - ---
------------------- ------------ ------------
------- --------- ----------
------- --- ----------- --
---------- -
---------------------------------------- -- -
--------- - ----
------------ - ------
----- -------- - ---------------------------------
---------------------------------------------- ----------
---
-
-总结
在本文中，我们学习了如何使用Angular框架优雅地实现骨架屏。通过路由守卫和组件控制，我们可以在加载数据时优雅地替换骨架屏占位元素。总之，骨架屏的应用可以提高用户的体验，形成良好的用户口碑，非常值得前端工程师深入学习和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6457504e968c7c53b0a11ad0