前置准备
在本文中，我们将使用 Angular 搭建一个前端项目，并通过 npm 包 @types/angular-block-ui 实现应用阻塞功能。
因此，在开始本教程之前，我们需要先确保以下几点：
- 本地已经安装了 Node.js 和 npm。
- 本地已经安装了 Angular CLI（如果没有，请先运行
npm install -g @angular/cli进行安装）。 - 已经创建了一个 Angular 项目（如果没有，请先运行
ng new your-project-name进行创建）。
@types/angular-block-ui 简介
@types/angular-block-ui 是一个官方发布的 TypeScript 定义文件库，用于帮助我们在 Angular 项目中使用 BlockUI 库时实现 TypeScript 的类型检查。
BlockUI 是一个基于 jQuery 的插件，用于在 Web 应用程序中实现应用阻塞的功能。在用户与应用程序交互时，BlockUI 可以模糊化应用程序的背景并显示一个加载中的图标，以提供更好的用户体验。
在 Angular 项目中使用 BlockUI 需要安装两个包：
- angular-block-ui：BlockUI 的 Angular 封装。
- @types/angular-block-ui：BlockUI 的 TypeScript 定义文件。
除了 BlockUI 库之外，我们在本教程中还将使用 Bootstrap 来美化应用程序。
安装必要的依赖
通过以下命令安装必要的依赖：
npm i angular-block-ui @types/angular-block-ui bootstrap
安装完成后，在项目的 angular.json 文件中导入 Bootstrap 样式：
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ],
在 AppModule 中配置 BlockUI
在 app.module.ts 中，我们引入 BlockUIModule 并在 imports 中进行配置：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------------
----------- ----
---------- ---
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -在 BlockUIModule.forRoot({...}) 中，我们可以传入多个配置项，包括 delayStart 和 delayStop 等参数。
在组件中使用 BlockUI
在需要使用 BlockUI 的组件中，我们可以通过在组件类中引入 BlockUI 的服务并在需要阻塞的代码块中使用 this.blockUI.start() 和 this.blockUI.stop() 方法来实现应用阻塞和解除阻塞。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- --------- - ---- -------------------
------------
--------- -----------
--------- -
---- ------------------
---------- -------------
------- ---------- ------------ ------------------------- ------------
------
-
--
------ ----- ------------ -
---------- -------- ----------
---------- ---- -
---------------------
------------- -- -
--------------------
-- ------
-
-在上述代码中，我们通过 @BlockUI() blockUI: NgBlockUI 的方式在组件类中引入了 BlockUI 的服务，并在 onClick() 方法中使用 this.blockUI.start() 方法开始应用阻塞，使用 setTimeout() 模拟一个耗时的代码块并在代码块运行完毕后使用 this.blockUI.stop() 方法解除阻塞。
结束语
通过以上步骤，我们已经成功地将 BlockUI 库集成到了 Angular 项目中，并通过 @types/angular-block-ui 库实现了对 TypeScript 类型的支持。在以后的开发中，我们可以通过 BlockUI 库实现更好的用户交互体验，在应用程序执行耗时操作时暂停用户操作并展示一个加载图标，提升用户体验和应用程序质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc146b5cbfe1ea0611d46