如何在 angular2 中实现微调器，并且可以在 angular2 中实现微调器隐藏？答案

【问题标题】：How to implement spinner in angular2 and spinner hiding is possible in angular2?如何在 angular2 中实现微调器，并且可以在 angular2 中实现微调器隐藏？
【发布时间】：2017-08-08 13:55:50
【问题描述】：

我想要显示微调器的图像加载时间和图像加载时间之后微调器应该隐藏的时间有一些延迟。在 angular 2 平台中实现此功能的正确方法是什么。

        <div id='panId' class="container-fluid" >

这是正在加载的图片，

            <img name="imageName1" mouseWheel style.width="{{imgWidth}}" (mouseWheelUp)="mouseWheelUpFunc($event)" (mouseWheelDown)="mouseWheelDownFunc()" 

                *ngIf="showImage" id="mainImage" src="{{imageVisible ? droppedImage: firtsImageToBind}}" class="imagepics mg-image "

                alt="loading..." />


            <img  name="imageName2" id="mainImage" mouseWheel style.width="{{imgWidth}}" (mouseWheelUp)="mouseWheelUpFunc($event)"

                (mouseWheelDown)="mouseWheelDownFunc()" class="mg-image " *ngIf="zoomImageVisible" src="{{zoomedImage}}">
        </div>


</div>

【问题讨论】：

有几个关于 SO 讨论在 Angular2 中使用微调器/加载指示器的问题，例如here。看看这些能否为您指明正确的方向

标签： html angular typescript

【解决方案1】：

看看 PrimeNG，他们有 spinner，它是开源的，所以你可以使用它。

http://primefaces.org/primeng

https://github.com/primefaces/primeng

https://github.com/primefaces/primeng/tree/master/components/spinner

【讨论】：

我可以为 css 类加载和隐藏加载的类实现任何条件用法
你为此尝试过 ngClass 或 ngStyle 吗？