Blazor(MudBlazor):onclick事件触发同级组件中的操作

Question

我刚开始愤怒地使用Blazor，尤其是使用MudBrazor，我似乎无法在兄弟组件中触发动作。

目前，我有以下组件：

<MudLayout>
<MudAppBar Elevation="1">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e)=> HandleClick(e))" />
<MudSpacer />
<MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
</MudAppBar>

<NavMenu></NavMenu>

<MudMainContent>
@Body
</MudMainContent>
</MudLayout>

@code {
public void HandleClick(MouseEventArgs e){
// How to trigger NavMenu action here?
}
}

目的是让MudAppBar在单击按钮时触发导航菜单的外观。

我已经研究了一些方法，比如EventCallbacks、Cascading Parameters等，但所有的例子似乎都是针对父/子关系的，而这是基于兄弟姐妹的。

NavMenu只是一个Razor组件，其中包含MudNavMenu，通过绑定"打开"属性切换可见性，如示例所示。

我肯定我错过了一些非常简单的东西，但我只是用各种方法兜圈子。

如果有人能提供一些建议，我们将不胜感激。

以下是NavBar组件标记供参考：

<MudDrawer @bind-Open="_drawerOpen" Elevation="2">
<MudDrawerHeader>
<MudText Typo="Typo.h5" Class="mt-1">Application</MudText>
</MudDrawerHeader>
<MudDrawerContainer>
<MudNavMenu Class="mud-width-full">
<MudDivider Class="my-2" />
<MudNavLink Href="/dashboard" Icon="@Icons.Filled.Dashboard">Dashboard</MudNavLink>
<MudNavGroup Title="Level 0" Icon="@Icons.Filled.Settings" Expanded="false">
<MudNavGroup Title="Level 1" Icon="@Icons.Filled.AdminPanelSettings" Expanded="false">
<MudNavGroup Title="Level 2" Icon="@Icons.Filled.People" Expanded="false">
<MudNavGroup Title="Level 3" Icon="@Icons.Filled.Lock" Expanded="false">
<MudNavLink Href="/delete" Icon="@Icons.Filled.DeleteForever">Delete Password</MudNavLink>
</MudNavGroup>
</MudNavGroup>
</MudNavGroup>
</MudNavGroup>
<MudNavLink Href="/billing" Icon="@Icons.Filled.Receipt">Billing</MudNavLink>
</MudNavMenu>
</MudDrawerContainer>

</MudDrawer>

@code {
bool _drawerOpen = true;
public void ToggleMenu()
{
_drawerOpen = !_drawerOpen;
}
}

---

快速更新：

我尝试将以下内容添加到我的NavMenu组件中：

[Parameter]
public bool IsOpen { get; set; }
[Parameter]
public EventCallback<bool> IsOpenChanged{ get; set; }

然后将其应用于MudDrawer：

<MudDrawer @bind-Open="IsOpen" 

然后在MainLayout中，将其设置在标记中：

<NavMenu @bind-IsOpen="_drawerOpen"></NavMenu>

然后调整按钮的OnClick以调用以下内容(仍在MainLayout中(：

bool _drawerOpen = true;
public void ToggleMenu()
{
_drawerOpen = !_drawerOpen;
}

这是有效的。然而，它感觉有点臭，我不相信我是以正确的方式来处理这个问题的。理想情况下，我希望NavMenu管理自己的状态，并让MainLayout中的按钮简单地触发NavMenu正在侦听的事件。

至少它有效。很明显，我可以把MudNavMenu/Drawer塞进同一个布局中，就不会有这个问题——但我想确定基本的组件通信，这似乎是一件非常简单的事情。

Answer 1

一种解决方案是使用@ref属性获取NavMenu组件引用，并使用该引用触发一些操作：

<MudLayout>
<MudAppBar Elevation="1">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e)=> HandleClick(e))" />
<MudSpacer />
<MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
</MudAppBar>

<NavMenu @ref="_navMenuRef"></NavMenu>

<MudMainContent>
@Body
</MudMainContent>
</MudLayout>

@code {
private NavMenu _navMenuRef;
public void HandleClick(MouseEventArgs e)
{
// call ToggleMenu or any other method
_navMenuRef.ToggleMenu();
}
}