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

Question

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

编辑：我通过使用异步任务更改了 OnInitializedAsync 方法，但这不是问题。 对于第一次加载，它可以正常工作。 但是然后我转到登录页面，登录并通过 NavigationManager 导航到主页，菜单不会“刷新”。 我该如何解决这个问题？

以下代码不起作用...

<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

我更改了上面的代码，但仍然无法正常工作

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

您可以使用各种方法来实现这一点。 以下解决方案基于 App State Pattern。

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

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 的事件委托，它应该封装将刷新 NavMenu 的方法。 当布尔属性 LoggedIn 的值更改时，将调用此委托。 LoggedIn 属性的值可能会在登录页面中更改，当用户已登录时，因此此委托的任何订阅者（在我们的示例中为 NavMenu）都将收到通知。

登录页面

• @inject AppState AppState注意上面将 AppState 注入到登录页面。 把它放在页面的顶部

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

导航菜单组件

• @inject AppState AppState
• @implements IDisposable

*

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

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

现在，每当您登录时，AppState 服务都会通知 NavMenu 组件重新呈现，以便登录链接不可见（未呈现）

创业班

services.AddSingleton<AppState>();

Answer 2

你有

protected override async void OnInitialized()

做那个

protected override async Task OnInitializedAsync()

几乎总是避免async void 。 在这种情况下，您的应用程序可以运行逻辑以在 TokenExistAsync() 完成之前更新 UI。 void版本并不意味着异步使用，名称是一个指导方针。

此外，Blazor 对hidden和类似的开/关属性有特殊支持。 您可以使用：

<li class="nav-item px-3" hidden="@hideLogin">

使用反向逻辑，您需要()如hidden=@(!showLogin)
并在您的代码块中：

bool hideLogin = false;

...

  // _loginVisibility = "hidden";
  hideLogin = true;

Answer 3

我已经稍微改变了你的代码......使用任务而不是无效。 试试这个代码片段：

@code{

private string _loginVisibility = "visible";

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

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

}

如果此更改不起作用，请检查您的 CSS 类

注意：我认为使用字符串值来隐藏或显示 li 元素是错误的。 您不必隐藏 li 元素。 它根本不应该被渲染。 你可以像这样定义一个布尔变量：

public bool ShowLink {get; set;} = true;

如您所见，该属性设置为默认值 true，因此 li 元素被渲染：

 @if ( ShowLink )
 {
 <li class="nav-item px-3">
        <NavLink class="nav-link" href="login">
            <span class="oi oi-person" aria-hidden="true"></span> 
 Login
        </NavLink>
    </li>
 }

在 TokenExistAsync 方法中，如果此方法返回“yes”，则应将其设置为 false。 因此 li 元素不会被渲染。

Answer 4

我想我知道问题出在哪里了。 上面的代码很好，可以工作。 可能的问题可能出在登录页面。 在类似 navigationManager.NavigateTo("/client/home") 的情况下，NavMenu 代码不会命中。 为此，您应该使用第二个参数： navigationManager.NavigateTo("/client/home", true); 我希望这会有所帮助。