angular2项目里使用 Spin(加载中)

何时使用

页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。

效果

ng-zorro官方链接:https://ng.ant.design/components/spin/zh

angular2项目里使用 Spin(加载中)_第1张图片
上图是靠按钮来决定spin的显示与隐藏,但在我们项目里,却是要根据请求时间来决定spin的显示与隐藏,下面是我在项目里使用spin的过程

1、html引入

		//  nzTip="Loading 是自定义加载时的名字
       
      //  要包裹的代码
       

2、ts逻辑

 public isSpinning: any = false;

  async ngOnInit() {
    this.loading = true;
 	// 同步代码逻辑
    this.isSpinning = false;
  }

简单解释(大神略过):
1、先用spin包裹要显示的内容,这部分内容是后台接口返回的数据,需要一定的时间去获取,这时就用spin来向用户反馈正在请求中(重点在需要时间,你要是用一段静态代码,那spin就没用了)
2、在逻辑层,要确保两点:一、在请求开始前打开spin,二、在请求结束后关闭spin
怎么才能确定请求结束了呢?------→ 保证一个或多个接口按同步方式执行(中间同步不同步无所谓),再把关闭spin代码放在最后

你可能感兴趣的:(ng-zorro)