blazor - NavigateTo 不立即显示新页面

Question

我有 Blazor WebAssembly 应用程序，其中包含一个列表和一个编辑页面。

当我查看实体列表并单击其中一个进行编辑时，使用 NavLink 组件，浏览器会导航到“编辑”页面，显示我的 Loader 组件，直到加载页面。

效果很好。

当我在“编辑”页面上单击“保存”时，如果成功，我将导航回“列表”页面。

private async Task OnValidSubmitAsync()
{
    this.IsBusy = true;

    var @event =
        await this.EventService.UpdateByIdAsync(
            this.Id,
            this.EventUpdateOptions);

    this.IsBusy = false;

    this.NavigationManager.NavigateTo($"/teams/{this.Event.Team.Id}/events");
}

我期望发生的是它会导航到列表页面，再次显示我的加载器组件，然后渲染列表页面。

但是会发生什么，它停留在“编辑”页面上，直到呈现“列表”页面，我从未看到我的 Loader 组件，并且对于用户来说，它看起来就像只是卡在“编辑”页面上。

解决方法是在保存完实体后在 OnValidateSubmitAsync 中显示我的加载器。

我是 Blazor 新手，仍在缩短页面生命周期，因此我的方法可能不正确。只是对这里发生的事情有点困惑，以及是否有办法强制列表页面与加载程序一起显示。

希望这是有道理的。 😊

Answer 1

根据您对 @enet 答案的评论，一个可能的答案是您的列表加载页面永远不会破坏 UI 线程中的列表加载逻辑，因此本质上一切仍然同步运行。如果是这种情况，有两种简单的方法可以解决此问题。

方法一

您可以使用 OnInitializedAsync 重写在页面加载时加载列表。重要的是，您需要在加载列表之前在方法中执行一些操作，这将导致运行时构建任务延续并将控制权返回给 UI 线程，以及 Task.Delay();效果很好。所以你的方法看起来像这样:

protected override async Task OnInitializedAsync()
{
    // await the delay, breaks the UI thread free from following logic
    await Task.Delay(1);

    // Populate your list with a background task that you await
    // Assumes you already have the list initialized and just need values
    ListValues = await Someservice.GetListValuesAsync();

    // You may not need this call, but if so you might need to invoke it async
    // Doing so will synchronize back to the UI thread 
    await InvokeAsync(StateHasChanged);
}

方法2

您可以使用 OnAfterRenderAsync 重写来加载数据。关键点是您将初始 UI 状态设置为将加载组件显示为默认操作，然后使用如下方法:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        ListValues = await Someservice.GetListValuesAsync();

        // Since you awaited the list population, now you can update UI
        MethodToSwitchUiToListView();

        // this may be needed as well
        await InvokeAsync(StateHasChanged);
    }
}

相对于方法 1，我更喜欢使用方法 2，因为它允许我构建非常简单的 UI 来表示加载状态，然后并行加载多个部分并在数据可用时切换 UI。其次，在 Blazor Server 中(这似乎不适用于您的情况)，OnInitializedAsync 方法被调用两次，但 OnAfterRender 只被调用一次。但无论哪种方式都应该有效。

请告诉我这是否有帮助。

附注- NavigationManager.NavigateTo() 方法还采用可选的第二个 bool 值参数，以强制加载页面。如果设置为true，它将强制强制重新加载和刷新。如果您还没有尝试的话，我鼓励您尝试一下，因为导航回当前页面可能会很有用。一个例子是复杂的表单重置之类的事情，从头开始比尝试到处反转状态更有意义，而且我遇到过一些令人沮丧的情况，这些情况都是用简单的第二个参数解决的。这可能对您的情况也有帮助。