组件加载 html/css 时的 blazor 加载微调器答案

【问题标题】：blazor loading spinner when component is loading html/css组件加载 html/css 时的 blazor 加载微调器
【发布时间】：2021-03-01 11:48:22
【问题描述】：

我有一件小事要做。有我的问题。我打开一个组件，然后我可以单击“编辑”，然后我需要 3-4 秒，而页面上显示需要 html/css。我想要做的是，当我单击“编辑”时，我设置了“loading = true”，当组件完成渲染新的 html/css 时，我设置了“loading = false”。这是我要实现的目标的示例：

if (!edit) {
   <h2>test</h2>
   @foreach (var item in items) {
      <p>Test item</p>
   }
}
else {
   <button @onclick = "() => { edit = true; }">
   <h2>test other </h2>
   <input />
   <input />
}

这是我设置加载微调器以显示在页面上的方式：

await InvokeAsync(() => { loading = true; });
await InvokeAsync(() => { loading = false; });

所以，我的问题是，当一个人按下编辑时，我怎样才能使微调器自动开始在屏幕上旋转。我知道在 OnInitializedAsync 时该怎么做，但是在这种特定情况下，它没有被初始化，它只是显示了组件的不同部分（但需要 5 秒，巨大的代码）。有什么办法吗？

【问题讨论】：

您在设置加载属性/字段后是否调用“StateHasChanged()”？
不，不要设置它。 “等待 InvokeAsync(() => { loading = true; });”自动完成这项工作。但这不是问题。问题是我不了解 blazor 组件的生命周期。所以不知道把这个“loading = true”和“loading = false”放在哪里。它在 OnAfterRenderAsync 中吗？我如何让这个逻辑起作用
@PovilasDirse 您通常将其放置在调用加载数据之前和之后。有时我不得不使用Thread.Sleep(1) 来让屏幕在每次设置加载标志后更新。
所以，我想要这样：@onclick = "() => { await logic(); }"。在“逻辑”方法中，我会休眠线程并将编辑设置为 true？
@PovilasDirse 是的，在数据之前和之后，或者任何需要时间的东西。在“逻辑”内部编辑 = true;线程睡眠（1）； StateHasChanged();做你的慢代码.....；编辑=假； StateHasChanged();

标签： c# .net blazor

【解决方案1】：

您需要 StateHasChanged 进行中间更新。 Blazor 在事件之前和之后应用它，但这对您没有帮助。

@onclick = "async () => { await DoLogic(); }"


async Task DoLogic()
{
    edit = false;         // means loading == true?
    StateHasChanged();    // to be sure, probably not needed
    await Task.Delay(1);  // allow time for the rendering

    // do the actual loading

    edit = true;  // means loading == false?
}

这里的窍门是await Task.Delay(1);，因此您的方法会暂停一段时间，Blazor 可以更新 DOM。

这里没有 InvokeAsync 的理由。

【讨论】：

谢谢。刚看到你的留言。我所做的正是如此，是的，它奏效了。谢谢