WebAssembly 项目 我想做菜单以组件的形式展现,但是点击导航没有触发SelectMenuItem事件,控制台没有任何报错,并且menuList数据正确,求大佬帮看下是为什么,第一次研究razor,还请各位大佬轻点喷
MainLayout.razor代码
@inherits LayoutComponentBase
<PageTitle>HoFei</PageTitle>
<div class="page">
<div class="sidebar">
<NavMenu OnMenuItemSelected="ChangeContent" />
</div>
<main>
@* <div class="top-row px-4">
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div> *@
<article class="content px-4">
@if (_currentContent != null)
{
@_currentContent
}
else
{
@* ChangeContent(typeof(HoFeiBlazorWeb.Client.Pages.Counter));
@_currentContent *@
<p>未选择菜单</p>
}
</article>
</main>
</div>
<div id="blazor-error-ui">
出现了一个未处理的错误.
<a href="" class="reload">重试</a>
<a class="dismiss">🗙</a>
</div>
@code {
private RenderFragment? _currentContent;
private async Task ChangeContent(Type componentType)
{
_currentContent = builder =>
{
builder.OpenComponent(0, componentType);
builder.SetKey(componentType.Name);
builder.CloseComponent();
};
await InvokeAsync(StateHasChanged);
///StateHasChanged();
}
}
NavMenu.razor 代码
@inject ModulesService _ModulesService
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">HoFei</a>
</div>
</div>
<input type="checkbox" title="导航菜单" class="navbar-toggler" />
<div class="nav-scrollable">
<nav class="flex-column">
<ul class="menu nav-item px-3" id="mainMenu">
@if (menuList != null)
{
foreach (var item in menuList)
{
var menu = item;
if (menu.SonList != null && menu.SonList.Count > 0)
{
<li class="has-submenu">
<span class="nav-link">
<span class="bi @menu.Icon" aria-hidden="true"></span>@menu.Name
</span>
<ul class="submenu nav-item px-3">
@foreach (var son in menu.SonList)
{
<li>
<button type="button" @onclick="@(async () => await SelectMenuItem(son))" class="nav-link">
<span class="bi @son.Icon"></span> @son.Name
</button>
</li>
}
</ul>
</li>
}
else
{
<li>
<button type="button" @onclick="@(async () => await SelectMenuItem(menu))" class="nav-link">
<span class="bi @menu.Icon"></span> @menu.Name
</button>
</li>
}
}
}
</ul>
</nav>
</div>
@code {
private List<SysModules>? menuList;
protected override async Task OnInitializedAsync()
{
if (menuList == null) menuList = await _ModulesService.GetMenu();
}
[Parameter]
public EventCallback<Type> OnMenuItemSelected { get; set; }
private async Task SelectMenuItem(SysModules menu) => await OnMenuItemSelected.InvokeAsync(GetComponentType(menu));
private Type GetComponentType(SysModules menu)
{
if (string.IsNullOrWhiteSpace(menu.NameSpaceUrl)) return typeof(Pages.Home);
return Type.GetType(menu.NameSpaceUrl) ?? typeof(Pages.Home);
}
}
测试按钮也无法触发,是因为MainLayout写的有问题还是少事件?
建议优化一下排版,支持 markdown 语法
– dudu 4个月前