带微调器的按钮被切成两半

Question

我有一个 table，在列内有一个按钮。当按下那个按钮时，我激活了微调器 "loading state"。我将那个状态保存在内存中，所以如果我移动到其他页面并返回，我可以获得状态并将其应用到那个按钮

当我启动微调器时，微调器和按钮的外观没问题，但如果我换页并返回，按钮仍然有微调器，但它被切成两半

之前

之后

html 看起来像这样：

<table class="table">
  <thead>
    <tr>
      <th class="left">Name</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="left">The item name</td>
      <td>
        <button [clrLoading]="stoppingState" type="button" class="btn btn-icon btn-outline" (click)="stopBroadcasting()">
          <clr-icon shape="stop"></clr-icon>
        </button>
      </td>
    </tr>
  </tbody>
</table>

提前致谢

Answer 1

事情是这样的。在您的示例中，当您设置 ClrLoadingButton 状态的值时，加载按钮的视图未完全初始化并且微调器的图标不在 DOM 中。有一个方法，ClrLoadingButton.setExplicitButtonWidth，当加载状态改变时运行并计算按钮宽度。由于当时加载微调器不在 DOM 中，因此它计算出了错误的宽度。

我移动了访问您的服务的代码并将 stoppingState 设置为 ngAfterViewInit 并且它按我预期的方式工作。

ngAfterViewInit() {
    this.stoppingState = this.myService.getStopState();
}

这是修改后的 StackBlitz 的 link：https://stackblitz.com/edit/clarity-light-theme-v012-3xmqmh

带微调器的按钮被切成两半

Button with spinner get cut in half

angular

vmware-clarity