代码之家 › 专栏 › 技术社区 › kouwschottel

主页blazor的不同导航菜单仅在第二次单击后工作?

blazor-webassembly blazor

kouwschottel · 技术社区 · 5 年前

对于我正在创建的Blazor服务器网站,我尝试为主页实现不同的导航菜单。为了实现这一点,我检查当前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(); });
    }

}

如何在主页上实现导航菜单的不同布局,而不必单击导航按钮两次?

0 回复 | 直到 5 年前

kouwschottel 5 年前

问题是navigationManager。在呈现页面之前,Uri不会重新加载其内容。为了确保它确实更改了Uri,我添加了以下方法,以便在Uri更改时调用重新呈现:

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

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