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

Я изо всех сил пытаюсь разделить значение свойств между компонентами в 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>();

страницы загрузятся, но у меня все равно будет та же проблема.


c# blazor
person bilpor    schedule 18.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Решением здесь было бы перенести общее свойство туда, где оно является общим, в данном случае MainLayout.cshtml, а не делать компоненты зависимыми от общего интерфейса.

Таким образом, MainLayout.cshtml будет содержать состояние в новом свойстве, и это свойство привязано к двум компонентам.

Вы не должны использовать DI для классов компонентов, только для классов предоставления услуг и т.п.

person Flores    schedule 20.01.2019
comment
Поскольку я поместил код в компонент (например, MenuFunctions), а не использовал @functions внизу страницы, мой MainLayout.cshtml уже наследуется от BlazorLayoutComponent. Поместив код в NavMenuToggleComponent.cshtml непосредственно в MainLayout (изначально он был у меня), я не могу добавить второй @inherits... в MainLayout.cshtml, что и заставило меня сначала отделить код от этой страницы. - person bilpor; 21.01.2019