Angular---添加一个loading组件

我们向服务端发起请求时，从前端发出请求到后端将响应结果返回给前端，这期间有一个空白的等待期，无论它是1毫秒、10秒，甚至1分钟。为了提升用户体验，避免尴尬，让用户知道在这段时间咱们的应用还活着，还在干着活，那么在等待期添加一个加载动画将是极好的。

尽管自己可以写一个CSS3样式，做出动画效果，但为了提高开发效率，我们直接引入loaders.css库来实现。

老夫写代码就是一把梭，撸起袖子就是干，开始吧。

• 第一步：在项目中引入loaders.css库。

这里是loaders.css库的地址

这里是演示页

在项目中执行下面的命令：

npm i --save loaders.css

安装成功后编辑angular.json文件，引入loaders.css的样式：

...

"styles": [
   "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/material-icons/iconfont/material-icons.css",
    "node_modules/loaders.css/loaders.css",
    "src/styles.scss"
 ],

...

其中bootstrap.min.css和material-icons.css是我这个项目中要用到的，loaders.css跟它俩没有关系，图省事儿，就把代码都拷贝过来了。

• 第二步，创建loader组件。

在项目中执行下面的命令：

ng g c shared/loader --spec=false

这样组件就创建好了，如图所示：

创建loader组件.png

编辑loader.component.html文件，内容如下：

编辑loader.component.scss文件，内容如下：

:host {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
}

编辑loader.component.ts文件，内容如下：

import { Component } from '@angular/core';

@Component({
  selector: 'yz-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.scss']
})
export class LoaderComponent {

  constructor() { }

}

• 第三步：用起来，在其他组件中引入loader组件。

客官，刚才你也看到了，我创建的loader组件的选择器名称是yz-loader，所以在需要它的组件中引用这个名称就可以了，如图所示：

引入loader组件.png

这里是效果：

效果.png

至于loader组件何时显示，何时隐藏，就要看具体的业务需求了，这里就不再累述了。