解决刚进入页面时轮播图会出现短暂空白的问题

现象描述：刚进入页面，轮播图部门会出现2-3秒空白，然后后续就正常显示了；

框架：Angular+ NG-ZORRO-antd

解决思路：是由于自动切换的时间间隔导致空白，我设置了一个标识符，一开始false的时候，显示新加的一个设置不自动切换，时间间隔0的轮播图组件；页面加载完立即改变为true，再显示我原来的组件；

代码：

/**
 * html 重点在于ngIf条件，如果init则显示时间间隔为5s的自动切换轮播图，
 * 否则显示不自动切换时间间隔为 0的轮播图
*/
<nz-content class="left-images">

    <nz-carousel *ngIf="init" #carousel [nzEffect]="effect" [nzAutoPlay]="true"                
        [nzDots]="false" [nzAutoPlaySpeed]="5000">
        <div class="go" nz-carousel-content *ngFor="let index of array">
            <div *ngIf="domain"><img [src]="index | imageUrl: defaultImg"></div>
            <div *ngIf="!domain"><img src="{
   
   {index}}"></div>
         </div>
    </nz-carousel>

    <nz-carousel *ngIf="!init" #carousel [nzEffect]="effect" [nzDots]="false" 
       [nzAutoPlaySpeed]="0">
       <div class="go" nz-carousel-content *ngFor="let index of array">
          <div *ngIf="domain"><img [src]="index | imageUrl: defaultImg"></div>
          <div *ngIf="!domain"><img src="{
   
   {index}}"></div>
        </div>
    </nz-carousel>

 </nz-content>

// ts代码 设置标识符，通过标识符来更改显示的组件

export class LoginComponent implements OnInit { 


    public init: boolean = false;

    ......  // 其他代码

    ngOnInit() {
    
        // 请求信息
        this.systemSetupService.getSystemInfoByDomainName().then(data => {
            const info: any = data;
            this.init = true;
            .... // 其他代码
        })


    }
}