在每个页面导航上执行 blazor header OnInitialized答案

【问题标题】：Execute blazor header OnInitialized on every page navigation在每个页面导航上执行 blazor header OnInitialized
【发布时间】：2020-07-23 12:41:50
【问题描述】：

我有一个 Blazor 服务器端应用程序。它对所有页面都有一个共同的标题。在标头的 OnInitialized 内部，它检查用户是否有任何新消息。如果是这样，它将闪烁一个图标。这段代码当然会在网站加载时执行一次。但是，对于每个后续导航到不同的页面，它不会再次执行。

有没有办法在用户每次导航到任何页面时重新执行此操作？我知道我也可以在后台使用计时器来执行此操作，但想知道它是否可以仅通过页面导航来实现？

谢谢！

【问题讨论】：

我认为您应该为此考虑不同的解决方案。查看SignalR with asp.net core 那里有很多关于如何实现这一点的教程。
我遇到了同样的问题，每次导航都会调用我的动态标题绑定。任何人都可以建议处理这个问题的最佳方法吗？

标签： blazor blazor-server-side

【解决方案1】：

您有 2 个选项，它们应该适用于服务器端和客户端。

根据Blazor docs可以订阅LocationChanged事件。您可以在任何可以获得 NavigationManager 参考的地方进行。

以下组件通过订阅 NavigationManager.LocationChanged 来处理位置更改事件。

您可以在 MainLayout.razor 页面上覆盖OnAfterRenderAsync Blazor 方法。 由于这是一个共享布局组件，它会在每次应用导航时呈现。您甚至可以@inject NavigationManager _navigationManager 来查看呈现的是哪个页面。

选项 2 的代码示例：

@inject NavigationManager _navigationManager
@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var url = _navigationManager.Uri;
        //write you code here...
    }
}

可能选项 2 是最好的使用方式，因为您的代码将在呈现的 UI 上运行，因此您需要更改元素。

【讨论】：

【解决方案2】：

如果你是服务器端，为什么不全部 InvokeAsync(StateHasChanged) 以防有新消息。

在您的 *.razor 代码部分中也是如此：

protected override async Task OnInitializedAsync()
{
    MyBackendService.OnUpdate += OnUpdate;
}

private void OnUpdate()
{
    // May be additional code to load the message - if requred
    InvokeAsync(StateHasChanged);        
}

并且在新消息到达或创建的BackendService中：

public event Action OnUpdate;
internal void UpdateView() => OnUpdate?.Invoke();

现在您可以调用 UpdateView() 以防有新消息出现，例如回调视图以重新加载。

【讨论】：