参数变更时如何重新渲染NavBar？含登录状态同步及通知计数需求

一、登录/退出时自动刷新NavBar #

直接通过组件参数传递IsSignIn无法自动触发NavBar重新渲染，用全局状态服务同步登录状态是最优解：

1. 创建登录状态服务：

public class AuthStateService
{
    private bool _isSignIn;
    public event Action OnAuthStateChanged;

    public bool IsSignIn
    {
        get => _isSignIn;
        set
        {
            if (_isSignIn != value)
            {
                _isSignIn = value;
                OnAuthStateChanged?.Invoke();
            }
        }
    }
}

2. 在Program.cs注册服务：

// Blazor WebAssembly
builder.Services.AddScoped<AuthStateService>();

// Blazor Server 按需选择Scoped/Singleton
builder.Services.AddScoped<AuthStateService>();

3. 修改NavBar组件，注入服务并监听状态变化：

@inject AuthStateService AuthState
@implements IDisposable

<div class="collapse navbar-collapse @NavMenuCssClass">
    <ul class="navbar-nav">
        <li>
            <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">Home</NavLink>
        </li>
        <li>
            @if (!AuthState.IsSignIn)
            {
                <NavLink class="nav-link" href="Account/Login">Login</NavLink>
            }
            else
            {
                <NavLink class="nav-link" href="Account/Profile">Profile</NavLink>
            }
        </li>
    </ul>
</div>

@code {
    protected override void OnInitialized()
    {
        AuthState.OnAuthStateChanged += StateHasChanged;
    }

    public void Dispose()
    {
        AuthState.OnAuthStateChanged -= StateHasChanged;
    }
}

4. 在登录/退出组件中更新状态：

@inject AuthStateService AuthState

// 登录成功后
AuthState.IsSignIn = true;

// 退出操作时
AuthState.IsSignIn = false;

状态变更时，NavBar会自动触发重新渲染。

二、跨组件修改通知计数 #

同样用全局服务管理通知状态：

1. 创建通知服务：

public class NotificationService
{
    private int _notificationCount;
    public event Action OnNotificationCountChanged;

    public int NotificationCount
    {
        get => _notificationCount;
        set
        {
            if (_notificationCount != value)
            {
                _notificationCount = value;
                OnNotificationCountChanged?.Invoke();
            }
        }
    }

    public void IncrementCount() => NotificationCount++;
    public void DecrementCount() => NotificationCount = Math.Max(0, NotificationCount - 1);
}

2. 注册服务到Program.cs：

builder.Services.AddScoped<NotificationService>();

3. 在NavBar中添加通知显示逻辑：

@inject NotificationService NotificationService
@implements IDisposable

<div class="collapse navbar-collapse @NavMenuCssClass">
    <ul class="navbar-nav">
        <li>
            <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">Home</NavLink>
        </li>
        <li>
            @if (!AuthState.IsSignIn)
            {
                <NavLink class="nav-link" href="Account/Login">Login</NavLink>
            }
            else
            {
                <NavLink class="nav-link" href="Account/Profile">Profile</NavLink>
            }
        </li>
        <!-- 通知入口 -->
        <li class="nav-link position-relative">
            <span>通知</span>
            @if (NotificationService.NotificationCount > 0)
            {
                <span class="badge bg-danger position-absolute top-0 start-100 translate-middle">
                    @NotificationService.NotificationCount
                </span>
            }
        </li>
    </ul>
</div>

@code {
    protected override void OnInitialized()
    {
        AuthState.OnAuthStateChanged += StateHasChanged;
        NotificationService.OnNotificationCountChanged += StateHasChanged;
    }

    public void Dispose()
    {
        AuthState.OnAuthStateChanged -= StateHasChanged;
        NotificationService.OnNotificationCountChanged -= StateHasChanged;
    }
}

4. 在其他组件中更新通知计数：

@inject NotificationService NotificationService

// 新增通知时
NotificationService.IncrementCount();

// 直接设置计数
NotificationService.NotificationCount = 3;
}

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