Angular 带旋转器的按钮被切成两半

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

当我启动微调器时，微调器和按钮的外观是正常的，但是如果我更改页面并返回，按钮仍然有微调器，但它被切成两半

以前

之后

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>

名称
项目名称

---

提前感谢

事情是这样的。在您的示例中，当设置

ClrLoadingButton

的值时，说明加载按钮的视图未完全初始化，微调器的图标不在DOM中。有一种方法，

ClrLoadingButton.setExplicitButtonWidth

，它在加载状态更改时运行，并计算按钮宽度。由于加载微调器当时不在DOM中，因此它计算的宽度错误

我将访问您的服务的代码移动到

stoppingState

中，并将

ngAfterViewInit

设置为

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

下面是修改后的StackBlitz的链接：
嘿，大卫。好像发生了什么事。你能在最短的时间内重现这个问题吗？这里有一个链接，链接到清晰性问题发起者：Hi@hippeelee。以下是链接：。不太确定如何同时共享代码。如果你能引导我，那就太好了。转到第1页，按下按钮。然后转到主页。按钮将被切断，如果你返回到第1页，同样的事情。图标有错误的原因吗？它应该是一个正方形！下面是代码链接：请看下面我的答案，如果有帮助，请告诉我。完全有道理！谢谢@hippeelee。