什么是ng2-http-loader？
ng2-http-loader是一个非常实用的angular2库，它提供了一种简便的方式在Angular2应用程序中加载http请求时的Loading动画。此外，它还可以在angular应用程序中，自定义Loading 动画，以及在服务重新启动后保持持续的 Loading 信息。
安装和依赖
ng2-http-loader 可以通过NPM安装：
npm install ng2-http-loader --save
需要注意的是，ng2-http-loader 依赖于HttpClient模块和其他第三方库。当我们安装ng2-http-loader时，相关依赖都会自动安装。但是，我们需要在Angular2项目中引入HttpClient模块，具体步骤可以参考下面的示例代码。
使用指南
要使用ng2-http-loader，请首先在您的项目中引入HttpClient模块。可以通过使用ng generate module 命令或手动创建模块文件的方式获得HttpClient模块。
在创建好的httpClient.module.ts文件中，我们需要将HttpClientModule导入app.module.ts:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [ HttpClientModule ],
exports: [ HttpClientModule ]
})
export class HttpClient {}接下来，我们需要在 app.module.ts 中的imports模块中导入LoadingModule。此时的app.module.ts文件应该类似于下面的示例代码所示：
-- -------------------- ---- ------- ------ - ------------------ - ---- ----------------- ------ - -------- - ---- ---------------- ------ - ---------- - ---- ---------------------- ------ - ------------ - ---- ------------------ ----------- ------------- - ------------ -- -------- - -------------- ----------- ---------------------------- -- ---------- - ------------ - -- ------ ----- --------- --
最后，我们将举一个基本的例子来展示ng2-http-loader的优秀表现。这里我们通过在 app.component.ts 文件中发送一个http请求来进行展示。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
---- -------------------
----
-- ----- --
-----
------
-
--
------ ----- ------------ -
----- - ------ --------
--------
------------------- ----- ----------- -
------------ - --------------------------------------------------------------
-
-
在上面的示例中，我们在AppComponent类中创建了一个http请求来获取jsonplaceholder API返回的数据。该request变量将传递给[ngBusy]属性持续显示 Loading动画。在您的Angular2应用程序中，您可以根据自己的需要自定义这个 Loading 动画。
结论
ng2-http-loader 可以轻松优雅地给您的应用程序带来完整的Loading状态效果，不只是当触发HTTP请求时候，还有在应用程序刚刚启动时都可以有效地识别出Loading的状态。同时，ng2-http-loader 并不会消耗过多的内存，因此你可以便捷地使用它，充分体验效用全面的Loading动画。如果您的应用程序需要通过Http请求来响应响应数据，ng2-http-loader 绝对是必不可少的工具！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005551181e8991b448d243b