Question

最近在Blazor中，我发现将RenderMode中的ServerPrerendered与调用OnInitializedAsync中的初始数据结合使用会导致OnInitializedAsync被调用两次。这会导致短暂的UI刷新，如果我不是从缓存中直接从数据库中提取数据，又不是直接从数据库中提取数据，则会进行额外的db调用，而不会执行bueno。因此，我切换为使用OnAfterRenderAsync并仅在firstRender为真时调用。这样可以处理额外的呼叫，并且没有UI闪存，感觉更好。但是，有一小段时间无法呈现整个页面，因此我正在等待它加载。我要实现的是页面顶部的加载栏，以指示加载进度，类似于YouTube的操作。

我想知道从单击超链接到呈现页面的那一刻，我需要使用哪些生命周期事件来实现这一目标？我还假设我将需要使用Singleton AppState根据总值上的某些当前值来跟踪加载进度，以生成钢筋完成进度百分比。

我想我知道该怎么做，并且正在开始尝试，但是我想知道你们在Blazor还提出了哪些其他解决方案？有任何提示或建议吗？

Answer 1

我只使用OnInitializedAsync生命周期方法只要您使用如下所示的异步方法调用数据：

    protected override async Task OnInitializedAsync()
    {
        try
        {
            Employees = (await EmployeeDataService
        .GetAllEmployees(JobCategory?.JobCategoryId))
        .ToList();
            if (JobCategory != null)
            {
                Title = $"{JobCategory.JobCategoryName} Employees";
            }
        }
        catch (Exception e)
        {
            _loadFailed = true;
            ExceptionMessage = e.Message;
        }
    }

然后在剃须刀中，如果数据尚未加载，我将进行各种检查并显示相应的加载器：

    @if (Employees == null && _loadFailed == true)
    {
        <h1 class="text-danger">
          The data failed to load please try again in a little while..
        </h1>
        <h6>@ExceptionMessage</h6>
    }
    else if (Employees== null)
    {
    <div style="display:normal;margin:auto" class="loader"></div>
    }
    else if (Employees.Count==0)
    {
    <p>No employees match the criteria with a job category of 
       @JobCategory.JobCategoryName.</p>
    }
    else...

加载程序的CSS必须存在于站点中。CSS：

    .loader {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
    }

在页面加载之前显示页面加载栏进度

1 个答案: