在Blazor中在Page和NavMenu之间交换数据 [英] Exchange Data between Page and NavMenu in Blazor

问题描述

我有一个标准blazor-project，它包含以下组件：

-> MainLayout.razor
-> NavMenu.razor
-> Pages/Index.razor
-> Pages/Sub1.razor

MainLayout如下所示：

<div class="sidebar">
    <NavMenu />
</div>
<div>@Body</div>

现在我想在我的页面(index.razor，sub1.razor)和导航菜单之间交换数据，这样我就可以在导航菜单中添加如下内容：

<div><p>You are now on Page: @CurrentPageName</p></div>

如何从我的页面中直接设置(NavMenu).CurrentPageName？我认为使用静电类来实现这一点并不是一个好的选择。

推荐答案

更好的作用域服务实现：

 public class CurrentPage
    {
        public string CurrentPageName { get; private set; }

        public void SetCurrentPageName(string name)
        {
            if (!string.Equals(CurrentPageName, name)) 
            {
                CurrentPageName = name;
                NotifyStateChanged();
            }
        }

        public event Action OnChange; // event raised when changed

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

我们不是在传递对象的字典，我们有一个简单的服务来做一件事。更改页面的唯一方法是调用SetCurrentPageName，它会引发一个事件，让消费者知道更改的名称。这在未嵌套的组件之间是必需的，因为否则更新不会传播。

我们还需要在启动时注册服务(由于当前页面是特定于会话的，所以服务的作用域是特定的)：

            services.AddScoped<CurrentPage>();

我们将注入Index.razor并使用：

@page "/"
@inject CurrentPage currentPage

<h1>Hello, world!</h1>

Welcome to your new app.
<button @onclick="ChangeName">Set Page Name</button>

<SurveyPrompt Title="How is Blazor working for you?" />
@code
{

    protected override void OnInitialized()
    {
        currentPage.SetCurrentPageName("The Home Page");
        base.OnInitialized();
    }

    void ChangeName() => currentPage.SetCurrentPageName("Name changed");
}

，最后在NavMenu.razor的顶部：

@inject CurrentPage currentPage

再往下走..

    <p>The current page is @currentPage.CurrentPageName</p>

@code {
    protected override void OnInitialized()
    {
        // if the OnChange event is raised, refresh this view
        currentPage.OnChange += () => StateHasChanged();

        base.OnInitialized();
    }

此状态类不知道如何使用它，并且没有对象或引用被传递。

[编辑]我认为用于设置页面名称的插入/覆盖模式相当于unBlazor，所以我还编写了一个组件来简化它-PageName.razor：

@inject CurrentPage currentPage;

@code {
    [Parameter]
    public string Name { get; set; }

    protected override void OnParametersSet()
    {
        currentPage.SetCurrentPageName(Name);
    }
}

现在，任何想要设置标题的页面都可以执行此操作：

@page "/fetchdata"
@inject HttpClient Http
<PageName Name="Weather forecast page!" />

整个使用者现在是一个组件：)

这篇关于在Blazor中在Page和NavMenu之间交换数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！