Blazor でコンポーネントの読み込みを処理する

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

Blazor は素晴らしく、本当に素晴らしく、特にボックスの読み込みなどの非同期処理を行う場合、見栄えが良くなります。

ページ、状態、コンポーネントなどの読み込みを処理する方法について、さまざまな方法を試してきました。そして、最終的に、希望どおりに実行する完璧な方法を見つけたと思います。

アイデア

各ページまたはコンポーネントの読み込みロジックを書き直す代わりに、ChildComponent を使用して親コンポーネントを構築します。これにより、複数回再利用するだけの変更が得られます。

LoadingComponent コード

コードは非常にシンプルですが、やるべきことはそれほど多くありません。読み込みプロパティを備えた基本的な 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 が 2 つ付いています)。私のソーシャルのほとんどはブログのヘッダーからも見つけることができます。

投稿が気に入っていただければ幸いです!