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

使用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>