将动画添加到栅格Angular中的刷新按钮

Question

当网格中没有更新的数据时，刷新按钮将不起任何作用。这让用户感到困惑，所以我想在重新加载网格的过程中为按钮添加一个动画。以某种方式使用字体。

HTML:

<hum-button
[tooltipContent]="'GridComponent.refreshGrid' | translate"
iconCss="fa fa-refresh"
[isPrimary]="true"
[onlyIcon]="true"
(click)="onRefreshGridClick()"
>
</hum-button>

角度：网格组件.ts

public refreshData(): void {
if (typeof this.refreshGridFn === 'function') {
this.refreshGridFn();
return;
}
if (this.agGrid) {
return this.agGrid.refreshData();
}

}

角度：ag-grid.component.ts

public refreshData(): void {
if (!this.customDatasource) {
this.log('refreshData');
if (this.dataSource && this.dataSource.rowCount > 0) {
this.gridApi.refreshInfiniteCache();
} else {
this.gridApi.purgeInfiniteCache();
}
}

}

这个按钮

Answer 1

有几个选项。

其中之一是使用.css。如果您定义了

.rotate {
animation: rotation 2s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

你可以使用一些像

<mat-icon [class.rotate]="loading">refresh</mat-icon>

并将变量加载设置为真/假

您也可以使用角度动画：

animations:[
trigger('rotate', [
transition('void=>*',[style({transform:'rotate(0)'})]),
transition ('* => *', [
style({ transform: 'rotate(0)' }),
animate ('650ms ease-in-out',style ({ transform: 'rotate(360deg)' }),
),
])
])

您使用

<mat-icon [@rotate]="count" 
(@rotate.done)="loading && count=count+1>refresh</mat-icon>

并定义两个变量

count:any;
loading;

当你想启动

this.count=this.count!=1?1:0
this.loading=true

完成时

this.loading=false

在stackblitz中，您有两个选项(只需单击按钮即可开始/结束动画(

更新

嗯，我们想在调用API时使用。所以我想象一个服务返回一个可观察的

我们有两种方法：

1. 使用变量并完成rxjs运算符。

   getData()
   {
   this.loading=true;
   this.count=this.count==1?0:1
   this.dataService.getData().pipe(finalize(()=>{
   this.loading=false
   })
   ).subscribe(res=>this.data=res)
   }
   

2. 另一种方法是使用运算符指示所以(遗憾的是，这引起了一点关注(这个操作员需要主题，所以功能变得像

   getAllData()
   {
   this.count2=this.count2==1?0:1
   this.dataService.getData().pipe(indicate(this.loading$,0)
   ).subscribe(res=>this.data=res)
   } 
   

   但是.html的有点复杂

   <!-using css-->
   <button mat-button (click)="getAllData()">
   <mat-icon [class.rotate]="loading$|async">
   refresh
   </mat-icon>
   </button>
   <!--using Angular animations-->
   <button mat-button (click)="getAllData()">
   <ng-container *ngIf="{loading:loading$|async} as load">
   <mat-icon [@rotate]="count2" 
   (@rotate.done)="load.loading && count2=count2+1">
   refresh
   </mat-icon>
   </ng-container>
   </button>
   

使用运算符的优点是，您可以与任何可观察到的-甚至是rxjs运算符of-一起使用

我刚刚更新了stackblitz