近年来，随着 Web 应用的日益复杂和前端开发的重要性不断增强，前端工具的使用也变得越来越普遍。在这些工具中，npm（Node Package Manager）是一个非常常用的工具，它可以帮助我们更方便地安装、管理和升级依赖包。
在前端开发中，Angular 是一种非常流行的框架。如果您正在使用 Angular 来构建自己的应用程序，那么您可能需要一个加载指示器，以提供更好的用户体验。而 angular-global-loading-spinner 这个 npm 包则是一个非常好的选择。在本文中，我们将为您介绍如何使用 angular-global-loading-spinner 包。
安装 angular-global-loading-spinner
要使用 angular-global-loading-spinner，您需要先安装它。您可以使用 npm 命令行工具来安装：
npm install angular-global-loading-spinner --save
如果您使用的是 Yarn 包管理器，可以使用以下命令来安装：
yarn add angular-global-loading-spinner
配置 angular-global-loading-spinner
安装好 angular-global-loading-spinner 包之后，需要将其配置到您的 Angular 应用程序中。在 Angular 中，可以将 angular-global-loading-spinner 注册为一个服务，并将其添加到应用程序的根模块中。
要注册 angular-global-loading-spinner 服务，您需要在应用程序的 providers 数组中添加它。打开您的应用程序的根模块文件（通常是 app.module.ts），并添加以下代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - -------------------------- - ---- --------------------------------- ----------- ------------- --------------- -------- --------------- -------------------------------------- ---------- --- ---------- -------------- -- ------ ----- --------- --
在上面的代码中，我们从 angular-global-loading-spinner 包中导入了 GlobalLoadingSpinnerModule，并在应用程序的 imports 数组中添加了它。然后，我们在 app.module.ts 文件中的 @NgModule 装饰器中将 GlobalLoadingSpinnerModule 注册为全局模块（使用 forRoot() 方法）。
现在，您可以在您的整个应用程序中使用 angular-global-loading-spinner 服务了。
在 Angular 应用程序中使用 angular-global-loading-spinner
接下来，我们将展示如何在您的 Angular 应用程序中使用 angular-global-loading-spinner。首先，您需要注入 GlobalLoadingSpinnerService。在您的组件中添加以下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------------------------- - ---- --------------------------------- ------------ --------- ----------- --------- ---------- ------------- -- ------ ----- ------------ - ------------------- ---------------------------- ---------------------------- -- -
在上面的代码中，我们从 angular-global-loading-spinner 包中导入了 GlobalLoadingSpinnerService，并在组件的构造函数中注入了它。现在您可以使用该服务来展示和隐藏全局加载指示器了。
接下来，我们将展示如何在页面加载时展示全局加载指示器。在 AppComponent 的 ngOnit 方法中添加以下代码：
ngOnInit() {
this.globalLoadingSpinnerService.show();
setTimeout(() => {
this.globalLoadingSpinnerService.hide();
}, 5000);
}在上面的代码中，我们使用 globalLoadingSpinnerService 来展示全局加载指示器。随后，我们设置了一个定时器，将在 5 秒钟后调用 globalLoadingSpinnerService 的 hide() 方法来隐藏全局加载指示器。
现在，当应用程序加载时，将展示全局加载指示器，并在 5 秒钟后自动隐藏。
总结
在这篇文章中，我们介绍了如何使用 angular-global-loading-spinner 包在 Angular 应用程序中展示全局加载指示器。我们提供了安装、配置和使用说明，并展示了示例代码。我们相信，本文对您有指导意义，并将帮助您打造更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bd881e8991b448d97af