c# - 更改 blazor 菜单中导航项的可见性

Question

我将 Blazor 与 .NET Core 3.0 结合使用。 当用户尚未登录时，我想在菜单中显示登录信息。当他登录时，登录导航项应该被隐藏。我怎样才能做到这一点？

编辑: 我通过使用 async Task 更改了 OnInitializedAsync 方法，但这不是问题。对于第一次加载，它可以正常工作。但是然后我进入登录页面，登录并通过导航管理器导航到主页，菜单将不会“刷新”。我该如何解决这个问题？

以下代码不起作用...

<div>
    <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>
        @if (!_isLoggedIn)
        {
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="login">
                    <span class="oi oi-person" aria-hidden="true"></span> <LocalizedString Key="NavMenuLogin" />
                </NavLink>
            </li>
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="licenseedit">
                    <span class="oi oi-spreadsheet" aria-hidden="true"></span> <LocalizedString Key="NavMenuRegistration" />
                </NavLink>
            </li>
        }
    </ul>
</div>

@code{

    private bool _isLoggedIn;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        await TokenExistAsync();
    }

    private async Task TokenExistAsync()
    {
        var retVal = await Http.GetStringAsync("api/Login/ExistToken");
        _isLoggedIn = retVal == "yes";
    }

}

Answer 1

I changed my code above, but still not working

我想我明白你想要什么...以下是实现该目的的代码，前提是我是对的...您想要刷新 NavMenu 组件的内容，该组件嵌入在 MainLayout 组件中，从登录页面，对吗？

您可以使用多种方法来实现此目的。以下解决方案基于应用程序状态模式。

首先，我们必须创建一个可以从 NavMenu 组件和 Login 组件访问的服务类。这是类(class):

public class AppState
{
    private bool _loggedIn;
    public event Action OnChange;
    public bool LoggedIn
    {
        get { return _loggedIn; }
        set {
            if (_loggedIn != value)
            {
                _loggedIn = value;
                NotifyStateChanged();
            }
        }
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}

此类定义了一个名为 OnChange 的事件委托(delegate)，它应该封装刷新 NavMenu 的方法。当 bool 属性 LoggedIn 的值更改时，将调用此委托(delegate)。当用户登录时，LoggedIn 属性的值可能会在登录页面中更改，因此该委托(delegate)的任何订阅者(在我们的例子中为 NavMenu)都将收到通知。

登录页面

• @inject AppState AppState 请注意上面将 AppState 注入(inject)到登录页面。将其放在页面顶部

• AppState.LoggedIn = true; 该代码应放置在登录过程的末尾。这将启动 OnChange 委托(delegate)的触发。

导航菜单组件

• @inject AppState AppState
• @implements IDisposable

*

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

public void Dispose()
{
    AppState.OnChange -= StateHasChanged;
}

现在，每当您登录时，AppState 服务都会通知 NavMenu 组件重新渲染，以便登录链接不可见(不渲染)

启动类

services.AddSingleton<AppState>();