为了在Blazor应用程序中保持菜单高亮(活动状态),即使用户在子详细页面中导航时也是如此,我们可以使用以下代码示例:
在Menu组件中:
在Menu组件中,设置一个bool IsActive属性,以确定当前导航是否处于活跃状态。这是由以下代码确定的:
protected override void OnInitialized()
{
foreach (var item in menuItems)
{
var pathMatch = item.Match == NavLinkMatch.All
? NavLinkMatch.All
: NavLinkMatch.Prefix;
var activeCss = "";
if (NavigationManager.Uri.IndexOf(item.Path, StringComparison.OrdinalIgnoreCase) != -1)
{
activeCss = "active";
}
item.IsActive = activeCss;
}
}
该代码将循环遍历菜单项,并使用IndexOf()方法检查导航管理器中的URI是否包含当前菜单项中的路径(使用不区分大小写的比较)。如果是,则将IsActive属性设置为“active”,它将在在Menu组件中的NavLink中使用。
在Detail组件中:
protected override void OnInitialized()
{
var currentUri = NavigationManager.Uri;
if (currentUri.IndexOf("detail", StringComparison.OrdinalIgnoreCase) != -1)
{
foreach (var menuItem in MenuItems)
{
if (currentUri.IndexOf(menuItem.Path, StringComparison.OrdinalIgnoreCase) != -1)
{
menuItem.IsActive = "active";
break;
}
}
}
}
在Detail组件中,我们需要通过检查当前URI中是否包含“detail”字样,来保持IsActive属性的值为“active”。如果是,则在Menu组件中找到当前详细页面的菜单项,并将其IsActive属性设置为“active”。
这样,当用户浏览应用程序并导航到详细页面时,菜单条目将保持高亮状态。