前言
ZORRO:https://ng.ant.design/components/layout/zh
博主当前库:7.0.0 beat3
loading组件
业务场景,预加载给予用户思想缓冲时间
通过ngIf判断是否显示loading组件
html代码如下
<nz-spin [nzSize]="'small'" class="forceCenter" *ngIf="loading"></nz-spin>
<body *ngIf="!loading">
//您的主要内容
</body>
ts代码如下
export class HomeComponent implements OnInit {
loading = false;
constructor() {
}
ngOnInit() {
this.loading = true;
setTimeout(_ => {
this.loading = false;
}, 2000);
}
}
css代码如下
css定义在全局style.css中
/* You can add global styles to this file, and also import other style files */
.forceCenter {
text-align: center !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
z-index: 100
}
nz-spin {
display: inline-block!important;
margin-right: 16px!important;
}