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 覆盖在页面加载时加载列表。重要的部分是您需要在加载列表之前在方法中做一些事情，这将导致运行时构建任务延续和 return 对 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);
}

方法二

您可以使用 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 仅被调用一次。不过，无论哪种方式都应该有效。

如果有帮助请告诉我。

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

NavigateTo 没有立即显示新页面

NavigateTo not immediately showing the new page

blazor

blazor-webassembly