时间戳

首页 > 解决方案 > 你能让 Blazor WebAssembly 使用导航更新组件吗？

routing - 你能让 Blazor WebAssembly 使用导航更新组件吗？

问题描述

我一直在使用 Blazor WebAssembly 示例作为新应用程序的基础，并且运行良好。但我希望让 NavMenu 更有活力。

在这种情况下，我希望在 NavMenu 中有管理员/版主特定的选项，我试图在用户登录后添加这些选项。我目前正在使用 NavigationManager.NavigateTo(page, false) 在 Razor 页面之间切换。它实际上主要是一个 Razor 页面，因此登录和动态表在同一页面上，具体取决于应用程序是否具有令牌。

我使用 false 选项来确保它不会刷新整个页面，否则令牌将丢失。不过，我现在觉得奇怪的是，如果我单击 NavBar，它将更新 NavBar，显示新的管理选项，这很好。但我曾希望使用 NavigationManager.NavigateTo(page, false) 在代码中做同样的事情也会使导航栏更新。

我一直在看一些关于 Blazor 以及如何使用组件的视频和教程，但我仍然觉得如何在组件之间调用以及如何更新外部/父组件感到困惑。

我可以想出不同的方法，我可能可以让它工作，但我希望弄清楚正确的方法是什么，并遵循代码约定。我怀疑我错过了一些基本的方法来做这样的事情，即使我一直在研究这个。

我添加的代码

        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Noter
            </NavLink>
        </li>
        @if (ApiService.Token.HasValue)
        {
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="logout">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> AdminStuff
                </NavLink>
            </li>
        }
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="logout">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Log ud
            </NavLink>
        </li>

标签： routingblazorwebassemblyblazor-client-side

解决方案

我找到了一种方法，但我怀疑它不是最好或最合适的方法。

我像这样创建了一个静态 EventManager：

    public static class EventManager
    {
        public static List<Action> renderActions = new List<Action>();
        public static void AddRenderAction(Action renderAction)
        {
            renderActions.Add(renderAction);
        }

        public static void TriggerRenderActions()
        {
            renderActions.ForEach(a => a.Invoke());
        }
    }

然后在 NavMenu.razor 组件的 OnInitialized 方法中添加固有的“StateHasChanged”方法：

protected override void OnInitialized()
        {
            EventManager.AddRenderAction(()=>StateHasChanged());
        }

这样我就可以从任何地方调用 EventManager.TriggerRenderActions() 来运行所有添加的操作。

推荐阅读