c# - 在 Blazor 中的 Page 和 NavMenu 之间交换数据

Question

我有一个标准的 blazor 项目，它具有以下组件:

-> 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？我希望为此使用静态类并不是一个好的选择。

Answer 1

更好的范围服务实现:

 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 ，这会引发一个事件，让消费者知道名称已更改。这在非嵌套组件之间是必需的，因为否则更新不会传播。

我们还需要在启动时注册服务(因为当前页面是特定于 session 的):

            services.AddScoped<CurrentPage>();

我们将注入(inject) 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();
    }

这个状态类对它的使用方式一无所知，也没有传递任何对象或引用。

[编辑] 我决定用于设置页面名称的注入(inject)/覆盖模式相当 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!" />

整个消费者现在是一个组件:)