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>