Blazor运行时无法动态添加HTML类，自定义加载组件无法显示

问题原因 #

Blazor 组件的UI更新依赖状态变更通知。直接修改普通字段Display后，Blazor 无法自动感知状态变化，因此不会触发组件重新渲染，导致UI没有更新（show类未添加、@if逻辑不生效）。

解决方案 #

在修改Display字段后，手动调用StateHasChanged()方法通知Blazor重新渲染组件。修改后的代码如下：

<div class="loading-indicator @(Display ? "show" : string.Empty)">
    <div class="d-flex justify-content-center">
        <div class="spinner-border loading-indicator-spinner text-light" role="status"></div>
    </div>
</div>

@code {
    public bool Display;

    public void Show()
    {
        Display = true;
        StateHasChanged(); // 通知组件更新UI
    }

    public void Hide()
    {
        Display = false;
        StateHasChanged(); // 通知组件更新UI
    }
}

额外检查点 #

• 确保父组件通过@ref正确获取加载组件实例，再调用Show()方法：

  @* 父组件代码示例 *@
  <LoadingComponent @ref="loadingRef" />
  <button @onclick="ShowLoading">显示加载</button>
  
  @code {
      private LoadingComponent? loadingRef;
  
      private void ShowLoading()
      {
          loadingRef?.Show();
      }
  }
  

• 确认loading-indicator的基础CSS样式正确（比如默认是display: none，添加show后改为display: block或其他可见状态）。

内容的提问来源于stack exchange，提问作者dan