Blazor如何在应用任意位置读取并监听查询参数变化

你遇到的问题本质是SupplyParameterFromQuery特性仅对标记了@page的路由页面组件、以及处于路由上下文内的布局组件生效，根组件App.razor不在路由管道中，因此无法直接使用该特性获取查询参数。有两种成熟的实现方案：

方案1：将全局监听逻辑迁移到MainLayout（推荐，实现最简单） #

布局组件处于路由上下文内，原生支持SupplyParameterFromQuery，且作为全局布局会被所有页面加载，完全满足全局切换语言的需求。
修改MainLayout.razor代码如下：

@using System.Globalization
@inherits LayoutComponentBase
@inject NavigationManager NavManager

<PageTitle>Blazor App</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @* 用级联参数把当前语言传递给所有子组件，子组件不需要再单独声明查询参数 *@
            <CascadingValue Value="CurrentLanguage" Name="CurrentLanguage">
                @Body
            </CascadingValue>
        </article>
    </main>
</div>

@code {
    private string _currentLanguage = "en"; // 默认语言

    [Parameter]
    [SupplyParameterFromQuery(Name = "lang")]
    public string? LangQueryParam { get; set; }

    public string CurrentLanguage
    {
        get => _currentLanguage;
        set
        {
            if (_currentLanguage == value) return;
            _currentLanguage = value;
            CultureInfo.CurrentCulture = CultureInfo.CurrentUICulture = new CultureInfo(value);
            StateHasChanged();
        }
    }

    protected override void OnParametersSet()
    {
        // 读取查询参数，没有的话用默认值
        if (!string.IsNullOrEmpty(LangQueryParam))
        {
            CurrentLanguage = LangQueryParam;
        }
    }
}

子组件不需要再单独声明SupplyParameterFromQuery，直接通过级联参数获取即可：

<p>当前语言：@CurrentLanguage</p>

@code {
    [CascadingParameter(Name = "CurrentLanguage")]
    public string CurrentLanguage { get; set; }
}

方案2：自定义全局查询参数监听服务（适合任意位置读取/监听） #

如果需要在服务、根组件等非路由上下文位置监听查询参数变化，可以通过NavigationManager监听地址变化，手动解析查询参数：

步骤1：创建语言状态服务 #

using System.Globalization;
using Microsoft.AspNetCore.WebUtilities;
using Microsoft.AspNetCore.Components;

public class LanguageService : IDisposable
{
    private readonly NavigationManager _navManager;
    public string CurrentLanguage { get; private set; } = "en";
    public event Action? OnLanguageChanged;

    public LanguageService(NavigationManager navManager)
    {
        _navManager = navManager;
        // 监听地址变化
        _navManager.LocationChanged += OnLocationChanged;
        // 初始化时主动解析一次当前地址
        ParseLangFromQuery(_navManager.Uri);
    }

    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        ParseLangFromQuery(e.Location);
    }

    private void ParseLangFromQuery(string uri)
    {
        var uriObj = new Uri(uri);
        var queryParams = QueryHelpers.ParseQuery(uriObj.Query);
        if (queryParams.TryGetValue("lang", out var langValue) && !string.IsNullOrEmpty(langValue))
        {
            if (CurrentLanguage != langValue)
            {
                CurrentLanguage = langValue;
                CultureInfo.CurrentCulture = CultureInfo.CurrentUICulture = new CultureInfo(langValue);
                OnLanguageChanged?.Invoke();
            }
        }
    }

    public void Dispose()
    {
        _navManager.LocationChanged -= OnLocationChanged;
    }
}

步骤2：注册服务 #

在Program.cs中添加注册：

builder.Services.AddScoped<LanguageService>();

步骤3：任意位置使用 #

在组件中注入并监听变化：

@inject LanguageService LangService
@implements IDisposable

<p>当前语言：@LangService.CurrentLanguage</p>

@code {
    protected override void OnInitialized()
    {
        LangService.OnLanguageChanged += StateHasChanged;
    }

    public void Dispose()
    {
        LangService.OnLanguageChanged -= StateHasChanged;
    }
}

内容的提问来源于stack exchange，提问作者Pieterjan