自定义FooterTemplate后，如何关闭Blazor FluentProfileMenu？

数据老陈

2026-6-21

我在Blazor 8项目中使用FluentUI的Profile Menu组件时，为给对话框页脚添加图标自定义了FooterTemplate，代码如下：

<FooterTemplate>
    <FluentStack VerticalAlignment="@VerticalAlignment.Center">
        <FluentSpacer />
        <FluentAnchor part="footer-link" Appearance="@Appearance.Hypertext" Href="#" OnClick="@ShowProfile">
            <FluentStack VerticalAlignment="@VerticalAlignment.Center">
                Settings
                <FluentIcon Value="@(new Icons.Regular.Size20.Settings())" /> 
            </FluentStack>
        </FluentAnchor>
    </FluentStack>
</FooterTemplate>

页面显示正常，但点击设置链接跳转页面时，Profile Menu的弹窗始终保持打开状态。推测原因是事件冒泡问题：Profile Menu外层div绑定了@onclick="@(e => PopoverVisible = !PopoverVisible)"事件，而FluentAnchor的点击事件可能阻止了冒泡，导致弹窗无法关闭。

尝试过以下三种方法均无效：

设置FluentAnchor的Href为目标页面并移除OnClick
绑定FluentAnchor的OnClick事件
绑定FluentProfileMenu的OnFooterLinkClick事件
以上方法都能实现页面跳转，但弹窗始终无法关闭。

可行解决方法（操作繁琐但有效）

给FluentProfileMenu添加组件引用：

<FluentProfileMenu
    @ref="_fluentProfileMenu"
    <!-- 保留原有其他属性 -->
>

在代码文件中定义对应的私有属性：

private FluentProfileMenu? _fluentProfileMenu;

在点击处理方法中，先通过反射关闭弹窗，再执行页面跳转：

public void ManageAccount()
{
    var propertyInfo = _fluentProfileMenu?
        .GetType()
        .GetProperty("Open", 
            BindingFlags.Instance | BindingFlags.Public);
    propertyInfo?.SetValue(_fluentProfileMenu, false);

    NavigationManager.NavigateTo("/Account/Manage");
}