在前端开发中，页面加载动画是一个常见的需求。为了减少重复造轮子的工作，开发者可以使用已有的 npm 包来实现这个功能。
ng2-pageloading 是一个 Angular2+ 的页面加载动画插件，本文将详细介绍如何使用这个 npm 包来实现页面加载动画。
安装
使用 npm 进行安装：
npm install ng2-pageloading --save
使用方法
在 app.module.ts 中引入和声明 ng2-pageloading：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------------------- - ---- ------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
--------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在需要使用的组件中使用 ng2-pageloading 组件：
<h1>My Component</h1> <ng2-page-loading [loading]="isLoading"></ng2-page-loading>
在组件类中设置 isLoading 变量：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- ----------- -
--------- - -----
------------- -
-- -----------------
------------- -- -
-------------- - ------
-- ------
-
-在上面的示例中，ng2-pageloading 组件通过 [loading] 属性来控制加载动画的显示与隐藏。isLoading 变量控制是否显示加载动画，设置为 true 时加载动画会显示，设置为 false 时加载动画会隐藏。
参数说明
ng2-pageloading 组件还有一些其他的可选参数：
- [color]：加载动画的颜色，默认为 #2a63d4
- [background]：加载动画的背景颜色，默认为 rgba(255,255,255,0.5)
- [zIndex]：加载动画的 z-index 值，默认为 9999
- [size]：加载动画大小，支持 px 和 rem 单位，默认为 50px
你可以根据自己的需求来设置这些参数。
总结
ng2-pageloading 是一个非常方便实用的 Angular2+ 页面加载动画插件，使用起来简单易上手。同时，该插件提供了一些参数以供自定义，开发者可以根据自己的需求来进行设置。
在日常开发中，如果需要实现页面加载动画的功能，你可以使用 ng2-pageloading，避免重复造轮子。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055da681e8991b448db63c