c# - 在发生之前拦截Blazor服务器端路由/导航

Question

我正在开发Blazor服务器端应用程序。熟悉Blazor的任何人都在左侧的NavBar中填充超链接，并以特殊的CSS类进行装饰。我的问题是，如果任何内容都已编辑，我将试图停止导航并在一个特定页面上显示一个弹出窗口。

我试过使用LocationChanged中的处理程序来捕获它，但是直到更改了URL后，它才会触发该方法。
我尝试在if语句中使用dbContext.ChangeTracker.HasChanges()，然后出现一个模式弹出窗口，询问您是否要保存更改或导航，但是在找到之前无法找到将其触发的方法。网址已更改。
我已经尝试了一个名为BlazorBeforeUnload的nuget包，以添加一个事件处理程序，该事件处理程序在重定向或路由发生之前捕获该事件处理程序，但是它是针对.net标准2.0而不是.net core 3.0编写的。我可以体面地编写C#，但是我不足以弄清楚如何将其从一种转换为另一种，或者不知道在这种情况下是否有可能。

我期望在页面重新路由或刷新之前有某种触发事件的方法，但是除了.net standard 2.0软件包(使我产生构建错误)外，我似乎在Visual Studio或在线其他任何地方都找不到。

Answer 1

我认为这个答案可能是真实的。
您可能会在这里获得更多有关此类内容的信息:
https://wellsb.com/csharp/aspnet/blazor-singleton-pass-data-between-pages/

AppData.cs:

namespace AppDataService.Services
{
    public class AppData
    {
        public string dangerfield { get; set; }
    }
}

Startup.cs:

public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddSingleton<WeatherForecastService>();
        services.AddScoped<...>();//singleton if'd be client-side
    }                       ↑ 
                     your class here

NavMenu.razor:

<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">TodoInBlazor</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">
    <span class="navbar-toggler-icon"></span>
</button>
</div>
@inject NavigationManager NavigationManager
@inject Services.AppData AppData
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
    <li class="nav-item px-3">
        <NavLink class="nav-link" @onclick="Navigate" Match="NavLinkMatch.All">
            <span class="oi oi-home" aria-hidden="true"></span> Home
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" @onclick="Navigate1">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" @onclick="Navigate2">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
        </NavLink>
    </li>
</ul>
</div>

@code {
private bool collapseNavMenu = true;

private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

private void ToggleNavMenu()
{
    collapseNavMenu = !collapseNavMenu;
}
private void Navigate()
{
    // ↓ Example
    if(AppData.dangerfield != null)
    NavigationManager.NavigateTo("");
}
private void Navigate1()
{
    NavigationManager.NavigateTo("counter");
}
private void Navigate2()
{
    NavigationManager.NavigateTo("fetchdata");
}
}

索引 Razor :

@inject Services.AppData AppData
<textarea @bind="AppData.dangerfield"></textarea>

请投票，我已经为此做了很多工作。