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>