Blazor Несколько событий изменения не обновляют свойство правильно

Question

Я новичок в Blazor и с нетерпением жду возможности попробовать его для некоторых наших внутренних приложений, однако у меня возникли проблемы с пониманием событий связывания / изменения. Начиная с нового проекта Blazor, я добавил синглтон AppService и внедрил этот сервис в новую страницу (здания) и мое меню. И на странице меню, и на странице сборки у меня есть флажок, связанный со свойством сервиса ie.

Когда я изменяю флажок, он обновляет свойство службы на этой странице, но не обновляет свойство на странице области содержимого. Что я делаю неправильно?

Обновление: я пытался реализовать решение здесь: Blazor - страница бритвы не обновляется после изменения свойства из DI Service , но, к сожалению, когда я это делаю, мое приложение даже не запускается. = ((Программа «[26772] iis express .exe» вышла с кодом -1073741819 (0xc0000005) «Нарушение доступа».)

AppService.

public class AppService 
{
    public bool IsAdmin { get; set; } = true;
    public event Action OnChange;
    private void NotifyDataChanged() => OnChange?.Invoke();
}

Запуск. cs Настроить метод служб

services.AddSingleton<Services.AppService>();

NavMenu.

@inject Services.AppService AppService
<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">Staff Management</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
            <span class="oi oi-home" aria-hidden="true"></span> Home
        </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="fetchdata">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="/buildings">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Buildings
        </NavLink>
    </li>
    <li class="nav-item px-3">
        IsAdmin: <input type="checkbox" @bind="@AppService.IsAdmin" />
        <span style="color:#fff;">@AppService.IsAdmin</span>
    </li>
</ul>
</div>

@code {
private bool collapseNavMenu = true;

private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

private void ToggleNavMenu()
{
    collapseNavMenu = !collapseNavMenu;
}

private void AdminChanged()
{
    AppService.IsAdmin = !AppService.IsAdmin;
    //trying to manually call state change here since below wasn't working
    StateHasChanged();
}

protected override void OnInitialized()
{
    AppService.OnChange += AdminChanged; //also tried AppService.OnChange += StateHasChanged;
}
}

Buildings.razor

@page "/buildings"
@inject Services.AppService AppService
<h3>Buildings IsAdmin: @AppService.IsAdmin</h3>

<input type="checkbox" @bind="@AppService.IsAdmin"/>
@code {

protected override void OnInitialized()
{
    AppService.OnChange += StateHasChanged;
}
}

В целом, я пытаюсь добиться этого: создать свойство, которое Я могу использовать все свои страницы / компоненты для условного отображения / выполнения операций.

Я бы ожидал, что если я нажму на флажок на странице зданий, то меню будет обновлено новым значением из службы, но не происходит. ИЛИ установка флажка в navmenu приведет к обновлению страницы building.razor.

Любая помощь будет принята с благодарностью. Может быть, я не правильно что-то понимаю. Спасибо !!

Answer 1

Это может быть связано с тем, что ваша служба вообще не вызывает событие. Свойство IsAdmin должно проверять, изменилось ли его значение, и если это так, должно вызывать событие. Попробуйте этот фрагмент кода. Сообщите тип обработчика события NotifyDataChanged ... Это Func<Task>

public class AppService 
{
   private bool isAdmin = true;
   public bool IsAdmin 
   { 
     get { return isAdmin; }
     set 
     { 
        if(isAdmin != value)
        {
            isAdmin = value; 

            if (NotifyDataChanged != null)
            {
                await NotifyDataChanged?.Invoke();
            }
        }
     } 
   } 
   public event Func<Task> NotifyDataChanged;

 }

Buildings.razor

@page "/buildings"
@inject Services.AppService AppService
@implements IDisposable 

<h3>Buildings IsAdmin: @AppService.IsAdmin</h3>

<input type="checkbox" @bind="@AppService.IsAdmin"/>
@code {

    public async Task OnNotifyDataChanged()
    {
        await InvokeAsync(() =>
        {
            StateHasChanged();
        });
    }


    protected override void OnInitialized()
    {
        AppService.NotifyDataChanged += OnNotifyDataChanged;
    }
    public void Dispose()
    {
        AppService.NotifyDataChanged -= OnNotifyDataChanged;
    }

Попробуйте и сообщите ...