在 Blazor 中跨多个 cshtml 页面共享单个属性

Question

我正在努力在 Blazor 中的组件之间共享属性值。基本上，我有一个带有 onclick 事件的按钮，它根据另一个 cshtml 页面应该对该值做出反应的值而在函数上设置一个值，但它没有。问题是因为两个 cshtml 页面都继承了相同的函数，所以它们有自己的函数实例。到目前为止，这是我的代码：

功能：

public class MenuFunctions : BlazorComponent, IMenuFunctions
{

    public bool CollapseNavMenu
    {
        get ; set;

    }

    public void ToggleNavMenu()
    {
        CollapseNavMenu = !CollapseNavMenu;
    }
}

NavMenuToggleComponent.cshtml 上的主按钮：

@inherits MenuFunctions 

<div class="pl-4  navbar navbar-dark">
   <button class="navbar-toggler navbar-brand main-button" title="MENU" onclick=@ToggleNavMenu>
    MENU
   </button>
</div>

我的 NavMenu.cshtml 文件：

@inherits MenuFunctions


<div class="@(CollapseNavMenu ? "collapse" : null)" onclick=@ToggleNavMenu>
<ul class="nav flex-column">
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="home">
            <span class="oi oi-home" aria-hidden="true"></span> Home
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="frontpage">
            <span class="oi oi-home" aria-hidden="true"></span> Front Page
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="counter">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="" Match=NavLinkMatch.All>
            <span class="oi oi-account-login" aria-hidden="true"></span> Login
        </NavLink>
    </li>
</ul>
</div>

将它们放在我的 MainLayout.cshtml 中

@inherits BlazorLayoutComponent

<NavMenuToggleComponent></NavMenuToggleComponent>
<div class="sidebar">
   <NavMenu />
</div>

<div class="main">

<div class="top-row px-4">
    <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    <NavLink class="nav-link pull-right" href="logout">
        <span class="oi oi-account-logout" aria-hidden="true"></span> Logout
    </NavLink>
</div>

<div class="content px-4">
    @Body
</div>
</div>

所以当我单击 NavMenuToggleComponent.cshtml 中的按钮时，我希望 CollapseNavMenu 在 NavMenu.cshtml 文件中做出反应

如果我删除接口的使用，则将组件注入页面而不是继承，然后将以下内容添加到启动中：

services.AddSingleton<MenuFunctions>();

页面将加载，但我仍然遇到同样的问题。

Answer 1

这里的解决方案是将共享属性带到公共的地方，在本例中为MainLayout.cshtml，而不是使组件依赖于公共接口。

因此MainLayout.cshtml 将在新属性中保存状态，并且该属性绑定到两个组件。

您不应将 DI 用于组件类，仅用于提供服务的类等。