如何检测LayoutComponentBase当前渲染的Blazor页面并解决时序问题

方案1：在布局组件中直接同步更新服务状态 #

利用布局组件的初始化生命周期，结合NavigationManager获取当前路由路径，直接在布局初始化时设置服务属性，确保子组件（如Component3）渲染时能拿到最新状态。

修改PageTopComponents.razor：

@inherits LayoutComponentBase
@inject NavigationManager NavManager
@inject MyService MySvc

<div><Component1 /></div>
<div><Component2 /></div>
<div><Component3 /></div>
<div><Component4 /></div>
<div><Component5 /></div>

@code {
    protected override void OnInitialized()
    {
        // 提取纯路径（忽略查询参数和末尾斜杠）
        var currentPath = NavManager.Uri.Split('?')[0].TrimEnd('/');
        
        // 根据当前路径设置服务状态
        MySvc.showData_A = currentPath == "/";
        MySvc.showData_B = currentPath == "/results";
        // 其他showData_*属性按需设置
    }
}

适用场景：所有使用该布局的页面，路由状态逻辑统一由布局管理，无需每个页面单独编写设置代码。

方案2：让服务自动监听路由变化 #

在MyService中注入NavigationManager，监听路由变更事件，自动同步更新状态，无论页面初始化还是路由跳转都能实时生效。

修改MyService.cs：

using Microsoft.AspNetCore.Components;

public class MyService
{
    public bool showData_A { get; set; } = false;
    public bool showData_B { get; set; } = false;
    public bool showData_C { get; set; } = false;
    public bool showData_D { get; set; } = false;

    private readonly NavigationManager _navManager;

    public MyService(NavigationManager navManager)
    {
        _navManager = navManager;
        // 初始化时先同步一次当前路径状态
        UpdateStateFromCurrentPath();
        // 注册路由变化监听，实时更新状态
        _navManager.LocationChanged += (_, __) => UpdateStateFromCurrentPath();
    }

    private void UpdateStateFromCurrentPath()
    {
        var currentPath = _navManager.Uri.Split('?')[0].TrimEnd('/');
        showData_A = currentPath == "/";
        showData_B = currentPath == "/results";
        // 其他状态按需设置
    }
}

适用场景：全局多个组件需要根据路由变化调整状态，无需手动在页面或布局中触发更新，一劳永逸。

方案3：在页面的SetParametersAsync中提前设置状态 #

如果必须由页面自行控制服务状态，可重写页面的SetParametersAsync方法——这个方法的执行时机早于OnInitializedAsync，且在路由切换时会被触发，能确保布局渲染前服务状态已更新。

修改Index.razor的@code部分：

@code {
    [Inject]
    public MyService MySvc { get; set; }

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        // 先同步设置服务状态，再调用基类方法
        MySvc.showData_A = true;
        MySvc.showData_B = false;
        await base.SetParametersAsync(parameters);
    }
}

修改Results.razor的@code部分：

@code {
    [Inject]
    public MyService MySvc { get; set; }

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        MySvc.showData_A = false;
        MySvc.showData_B = true;
        await base.SetParametersAsync(parameters);
    }
}

适用场景：不同页面需要自定义服务状态逻辑（如除路由外还需结合其他参数），保留页面的控制权。

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