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

Question

I'm struggling to share a properties value across components in Blazor. Basically I have a button with an onclick event this sets a value on a function depending on the value another cshtml page should react to the value and it doesn't. The issue is that because both cshtml pages inherit the same function they have their own instance of the function. Here's my code so far:

the Function:

public class MenuFunctions : BlazorComponent, IMenuFunctions
{

    public bool CollapseNavMenu
    {
        get ; set;

    }

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

The main button on 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>

my NavMenu.cshtml file:

@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>

putting it all together in my 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>

so when I click the button in NavMenuToggleComponent.cshtml I want the CollapseNavMenu to react in the NavMenu.cshtml file

If I remove the use of the interface, then inject the components onto the pages as opposed to Inherit and then add the following into the startup:

services.AddSingleton<MenuFunctions>();

the pages will load, but I still get the same issue.

Answer 1

The solution here would be to bring the shared property to the place where it is common, in this case the MainLayout.cshtml and not make the components dependent on a common interface.

So the MainLayout.cshtml would hold the state in a new property and that property is bound to the two components.

You should not use DI for component classes, only for service providing classes and alike.