Blazor中Index页加载后如何按条件控制左侧导航菜单项显隐

你现有代码的问题出在：导航组件里用来判断显隐的isAdmin是未赋值的局部变量，没有关联到注入的状态服务存储的值，按以下步骤调整即可生效：

• 直接修改导航栏的权限判断逻辑，不要用局部isAdmin变量，直接读取状态服务中的IsAdmin属性即可

@* 替换原有@if (isAdmin)的判断逻辑 *@
@if (AppStateService.IsAdmin)
{
    <a class="nav-items" target="_blank">
        <div style="width:40px;">
            <i title="Security" class="fab fa-expeditedssl fa-fw" style="color: white; font-size: 30px;"></i>
        </div>
        <span class="nav-items-text" style="color:white; visibility:@Visibility">Security</span>
    </a>   
}

• 修正Index页面的赋值时机，不要直接在Razor文件顶层写赋值代码，要放到组件生命周期方法中执行，避免组件渲染顺序问题导致状态更新不触发

@inject AppStateService AppStateService

@code {
    protected override async Task OnInitializedAsync()
    {
        // 此处替换为你实际获取当前用户管理员身份的业务逻辑
        bool currentUserIsAdmin = await FetchUserRoleInfo();
        AppStateService.IsAdmin = currentUserIsAdmin;
    }
}

• 检查状态服务的注册配置，AppStateService必须注册为Scoped生命周期，才能保证同一个用户会话（Blazor 电路）内所有组件共享同一个服务实例，跨组件修改状态才能同步

// Startup.cs 中 ConfigureServices 方法内的注册代码
public void ConfigureServices(IServiceCollection services)
{
    // 其余原有服务注册逻辑保持不变
    services.AddScoped<AppStateService>();
}

如果你更习惯在组件内用局部变量接收状态值，只需要在导航组件初始化时先读取一次初始值即可，你之前写的状态变更事件绑定、Dispose解绑逻辑都是正确的，无需修改：

private bool isAdmin;
protected override async Task OnInitializedAsync()
{
    // 初始化时先取一次当前状态值
    isAdmin = AppStateService.IsAdmin;
    // 绑定状态变更触发重渲染的事件
    AppStateService.OnChange += StateHasChanged;
}

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