前言
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;
}
