angular6 页面加载数据时的loading提示

Posted 2021-12-23 lucky-heng

使用npm安装ngx-loading模块

npm install --save ngx-loading

 

在app.module.ts中导入模块

import  BrowserModule  from ‘@angular/platform-browser‘;
import  NgModule  from ‘@angular/core‘;
import  NgxLoadingModule  from ‘ngx-loading‘;

@NgModule(
  ...
  imports: [
    ...

      NgxLoadingModule,

    ...
  ],
 ...
)
export class AppModule  

 

在对应的component.ts文件中增加loading属性

export class *Component implements OnInit 
  loading = false;
  ...
  get*Data(): void 
    this.loading = true;
    this.*Service.getData(url).subscribe(res => 
      ...
      this.loading = false;
      ...
    , error => 
      ...
      this.loading = false;
      ...
    );
  

 

最后，在html文件中加入下列代码即可：

<ngx-loading [show]="loading" [config]=" backdropBorderRadius: ‘14px‘ "></ngx-loading>