Совместное использование одного свойства на нескольких страницах cshtml в Blazor

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 для классов компонентов, только для классов, предоставляющих услуги, и тому подобное.