有什么方法可以与 blazor 页面的主要布局进行通信

Question

这里我想将一些标题传递给 mainlayout.razor 页面，以便我的组件或页面可以更新 header 的标题。 blazor 中是否有任何可能的方法来做到这一点？ 任何帮助将不胜感激。

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4 bg-success">
            <button onclick="toggleNav()">
                <span class="oi oi-menu"></span>
            </button>
            <div class="text-center">
                hey there
            </div>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
    
</div>

@code
{

}

我的子组件是一个带有@page 指令的路由器页面，用于在页面之间导航我希望该组件更新这个主布局有什么可能的方法吗？ 提前感谢您的帮助。

问候，

Answer 1

您应该使用 CascadingValue 组件包装 MainLayout 组件的视图部分，该组件的值是对 MainLayout 本身的引用，以便您可以引用 MainLayout 组件，例如，从 Counter 组件中，您可以从中为属性分配值字符串在 MainLayout 组件中定义的标题。 此属性还包含对 StateHasChanged 方法的调用以刷新显示...

 @page "/counter"



// Gets a reference to the MainLayout component
    [CascadingParameter]
    public MainLayout Layout { get; set; }


    protected override void OnInitialized()
    {
        Layout.Title = "Greetings from Counter";

    }

MainLayout.razor

@inherits LayoutComponentBase

<CascadingValue Value="this">
    <div class="page">
        <div class="sidebar">
            <NavMenu />
        </div>

        <div class="main">
            <div class="top-row px-4">
                @Title
                <LoginDisplay />
                <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
            </div>

            <div class="content px-4">
                @Body
            </div>
        </div>
    </div>

</CascadingValue>

@code
{
    private string title;

    public string Title
    {
        get => title;
        set
        {
            title = value;
            InvokeAsync(() => StateHasChanged());
        }
    }
}