在 Blazor 中处理加载组件

· 1 分钟阅读
.NET Blazor
Available in: 中文 · English · Español · Français · Deutsch · Português · 한국어 · 日本語 · Русский · العربية · हिन्दी · Polski · Türkçe · Bahasa Indonesia · Nederlands

Blazor 太棒了，真的太棒了，特别是当我们执行诸如加载盒子之类的异步操作时，它看起来很棒。

我一直在尝试采用多种方法来处理加载页面、状态、组件等。我想我终于找到了按照我想要的方式做到这一点的完美方法。

想法

我们不用重写每个页面或组件上的加载逻辑，而是使用 ChildComponent 构建父组件，这将使我们能够多次重用。

加载组件代码

代码非常简单，没什么可做的，一个基本的 if 带有加载属性，内部有一个切换函数，就完成了！

@if (_loaded)
{
    <div class="text-center">
        <div class="spinner-border" role="status">
            <span class="sr-only"></span>
        </div>
    </div>
}
else
{
    @ChildContent
}

@code {
    private bool _loaded = true;

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    public void ToggleLoad(bool state)
    {
        _loaded = state;
    }
}

用法

用法非常简单，为了测试，我们将使用一个新页面，并将内容放入刚刚创建的 LoadingComponent 组件中。

@page "/loading"
@using LoadingBoxes.Components

<LoadingBoxes.Components.LoadingComponent @ref=loadingComponent>
    This is some content
</LoadingBoxes.Components.LoadingComponent>

@code {
    private LoadingComponent loadingComponent;


    protected override async Task OnInitializedAsync()
    {
        // We are going to simulate some load
        await Task.Delay(5000);

        loadingComponent.ToggleLoad(false);
    }

}

这就是它的样子

更有趣的例子

假设我们有多个组件，每个组件都有自己的加载时间，我们可以在此基础上构建一些看起来不错的东西！

让我们创建一个可以重用的假加载组件，称为 FakeLoadingComponent。

@using LoadingBoxes.Components

<LoadingBoxes.Components.LoadingComponent @ref=loadingComponent>
    It took @ellapsedTime seconds!
</LoadingBoxes.Components.LoadingComponent>

@code {
    private LoadingComponent loadingComponent = new();
    private int ellapsedTime = 0;
    private Random rnd = new(); 

    protected override async Task OnInitializedAsync()
    {
        var random = rnd.Next(0, 5000);

        // We are going to simulate some load
        await Task.Delay(random);

        ellapsedTime = random/ 1000;

        loadingComponent.ToggleLoad(false);
        StateHasChanged();
    }
}

然后我们只需使用多个 FakeLoadingComponent 组件更新 Loading 页面并检查结果！

@page "/loading"
@using LoadingBoxes.Components

<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>

现在看起来好多了

就是这样！

如果您有任何问题或疑问，请随时在任何社交媒体上与我联系：@emimontesdeoca（在 Twitter 中实际上是 @emimontesdeocaa，末尾有两个 aa）。您还可以在博客标题上找到我的大部分社交活动。

希望你喜欢这篇文章！