Angular6-Zorro(佐罗)组件使用-持续更新++

前言

ZORRO：https://ng.ant.design/components/layout/zh

博主当前库：7.0.0 beat3

 

loading组件

业务场景，预加载给予用户思想缓冲时间

通过ngIf判断是否显示loading组件

html代码如下

//您的主要内容

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