主页 blazor 的不同导航菜单仅在第二次单击后才起作用？答案

【问题标题】：Different nav menu for Home page blazor only working after second click?主页 blazor 的不同导航菜单仅在第二次单击后才起作用？
【发布时间】：2021-06-14 22:05:00
【问题描述】：

对于我正在创建的 Blazor Server 网站，我尝试为主页实现不同的导航菜单。为此，我检查当前 URL 是否等于 BaseURI，如果是，则显示不同的 NavMenu。

现在是奇怪的事情。它仅在我单击导航菜单两次时才有效。因此，例如，如果我导航到主页，则导航菜单会保持在任何其他页面上。如果我再次单击主页按钮，页面不会刷新，但导航菜单会更新为正确的布局。

@inject NavigationManager navigationManager 

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href=""> <img src="image.jpg" alt="Image" height="30" /></a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

@if (navigationManager.Uri == navigationManager.BaseUri)
{
<div class="@NavMenuCssClass" @onclick="Toggler">
    <ul class="nav flex-row align-items-center">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="1">
                <span class="oi oi-list-people" aria-hidden="true"></span> 1
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="2">
                <span class="oi oi-list-people" aria-hidden="true"></span> 2
            </NavLink>
        </li>
    </ul>
</div>
}
else
{
<div class="@NavMenuCssClass" @onclick="Toggler">
    <ul class="nav flex-row align-items-center">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="1">
                <span class="oi oi-list-people" aria-hidden="true"></span> 1
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="2">
                <span class="oi oi-list-people" aria-hidden="true"></span> 2
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="3">
                <span class="oi oi-list-people" aria-hidden="true"></span> 3
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="4">
                <span class="oi oi-list-people" aria-hidden="true"></span> 4
            </NavLink>
        </li>
    </ul>
</div>
}

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    private void Toggler()
    {
        InvokeAsync(() => { StateHasChanged(); });
    }

}

如何在主页上实现不同的导航菜单布局，而无需单击导航按钮两次？提前致谢！

【问题讨论】：

尝试将 StateHasChanged() 添加到 ToggleNavMenu() 方法
很遗憾这不起作用，我需要继续点击按钮两次。
好的。很高兴你解决了你的问题

标签： blazor blazor-webassembly

【解决方案1】：

问题在于，navigationManager.Uri 在页面呈现之前不会重新加载其内容。为了确保它确实改变了 Uri，我添加了以下方法来在 Uri 改变时调用重新渲染：

private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
{
    StateHasChanged();
}

protected override void OnInitialized()
{
    navigationManager.LocationChanged += HandleLocationChanged;
}

这为我解决了问题:)！

【讨论】：