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文件中做出反应

如果我删除了对接口的使用，则将与Inherit相反的组件注入到页面上，然后将以下内容添加到启动中：

services.AddSingleton<MenuFunctions>();

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

Answer 1

这里的解决方案是将共享属性带到公共位置，在这种情况下为MainLayout.cshtml，而不是使组件依赖于公共接口。

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

请勿将DI用于组件类，而只能用于服务提供类等。

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

1 个答案: