为网格中的刷新按钮添加动画 Angular

Question

当网格中没有更新的数据时，刷新按钮在视觉上将无任何作用。这让用户感到困惑，所以我想在重新加载网格期间向按钮添加动画。使用 font-awsome 方式。

HTML:

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

Angular: grid.component.ts

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

if (this.agGrid) {
  return this.agGrid.refreshData();
}

}

Angular: 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();
  }
}

}

this button

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>

并将变量加载到true/false

您还可以使用 Angular 动画：

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 中有两个选项（只需单击按钮即可 start/end 动画）

更新

好吧，我们想在调用 API 时使用。所以我想象一个服务 return 一个 observable

我们有两种方法：

使用变量并完成 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)
  }

其他方法是使用运算符指示，因为它是如何在这个 SO（遗憾的是有一点注意）这个运营商需要一个主题，所以函数变成了

  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

为网格中的刷新按钮添加动画 Angular

Add animation to the refresh button in the grid Angular

html

angular

components

observable

subscribe