Как перерисовать NavBar при изменении параметра

Я создаю сервис для рендеринга разных дочерних элементов на основе событий. Цель службы — инициировать события между компонентами.

public class ChildRenderService
{
    public Action OnLogginChanged { get; set; }

    public void RequestLogginChanged()
    {
        OnLogginChanged?.Invoke();
    }
}

На вашем NavBar вы можете посмотреть событие.

protected override async Task OnInitializedAsync()
{
    _childRenderService.OnLogginChanged += StateChangedFromChild;
}

private async void StateChangedFromChild()
{
    StateHasChanged();
}

И в вашем компоненте входа в систему запросите изменение после входа в систему.

_childRenderService.RequestLogginChanged();

И конечно, не забудьте добавить сервис в DI.

builder.Services.AddScoped<ChildRenderService>();

.NET 8 поддерживает разделы. используя разделы, мы можем решить эту проблему. Дополнительные сведения о разделах см. в разделе Разделы ASP.NET Core Blazor.

В следующем коде я определяю содержимое LoginMenu в SectionContent в MainLayout. SectionContent предоставляет контент для соответствующего компонента SectionOutlet в NavBar.

NavBar.razor:

<div class = "collapse navbar-collapse @NavMenuCssClass">
    <ul class = "navbar-nav">
        <li>
            <NavLink class = "nav-link" href = "/" Match = "NavLinkMatch.All">Home</NavLink>
        </li>
        <li>
            <SectionOutlet SectionName = "LoginMenu"></SectionOutlet>
        </li>
    </ul>
</div>

MainLayout.razor:

<div class = "page" style = "flex-direction: column;">
    <main>
        <NavMenu />
        <HeaderComponent />
        @if (IsSignIn == false)
        {
            <SectionContent SectionName = "LoginMenu"> 
              <NavLink class = "nav-link" href = "Account/Login">Login</NavLink>
            </SectionContent>  
        }
        else
        {
            <SectionContent SectionName = "LoginMenu">
               <NavLink class = "nav-link" href = "Account/Profile">Profile</NavLink>
            </SectionContent>  
        }
        
        <article class = "content">
            @Body
        </article>

        <Footer />
    </main>
</div>
@code{
    protected override async Task OnParametersSetAsync()
    {
        IsSignIn = await loginService.IsSignIn();
    }
}