前言
ng4-ladda 是一个基于 Angular 的按钮加载动画插件，可以为网站增添更好的用户体验，并提高网站的交互性。
在本文中，我们将学习如何安装、配置和使用这个 npm 包，并结合示例代码演示其实际应用效果。
安装
我们可以通过 npm 命令行工具安装 ng4-ladda，具体步骤如下：
npm install ng4-ladda --save
配置
我们需要引入 LaddaModule 和 BrowserAnimationsModule 模块，这可以通过在 app.module.ts 文件中导入以下代码完成：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ----------- - ---- ------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
-----------
--
---------- ---
---------- --------------
--
------ ----- --------- - -上述代码中，LaddaModule 是我们需要使用的模块，BrowserAnimationsModule 是我们需要导入的浏览器动画模块，这可以让 ng4-ladda 的动画更加流畅。
使用
我们可以通过将指令 Ladda 属性附加到按钮上来启用 ng4-ladda 的效果。
-- -------------------- ---- ------- ------- ------------------ ------------------------ ------------------- --------------------- ---------------------- ---------- ------------- ----- ----------------------------- ---------
上述代码中，我们用 [ladda] 属性将 isLoading 变量绑定到按钮上。此外，data-style 和 data-spinner-size 属性可以自定义按钮样式和加载图标样式。
在对 submit 方法进行修改后，设置 isLoading 标记来启用 ng4-ladda 的动画效果。
submit() {
this.isLoading = true;
// 发送表单
// ...
this.isLoading = false;
}示例
完整的使用示例代码如下：
-- -------------------- ---- -------
----- ---------------
---- ---- ---
---
-------
------------------
------------------------
-------------------
---------------------
----------------------
---------- -------------
----- -----------------------------
---------
--------- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------------
--------- -----------
--------- -----------------------
---------- ------------------------
--
------ ----- ------------ -
---- - --- -----------
--------- --- --------------- ---------------------
--------- --- --------------- --------------------
---
--------- - ------
-------- -
-- ----------------- -
-------------- - -----
-- ------
-- ---
-------------- - ------
-
-
-结论
通过本文学习，我们可以轻松地配置和使用 ng4-ladda 模块，并为我们的网站增添更好的用户体验。
ng4-ladda 的相关文档和示例代码可以在官方 GitHub 库中找到：https://github.com/moff/ng4-ladda
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb181e8991b448dc4eb