带微调按钮的按钮减半

Question

我有一个表格，其中有一列，里面有一个按钮。当按下该按钮时，我激活微调器的“加载状态”。我将该状态保存在内存中，因此，如果我移至其他页面并返回，则可以获取该状态并将其应用于该按钮

启动微调器时，微调器和按钮的外观都可以，但是如果我更改页面并返回，则按钮仍具有微调器，但会切成两半

之前

之后

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的链接：https://stackblitz.com/edit/clarity-light-theme-v012-3xmqmh