有什么方法可以与 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
{

}

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

此致，

Answer 1

您应该用 CascadingValue 组件包裹 MainLayout 组件的视图部分，该组件的值是对 MainLayout 本身的引用，这样您就可以引用 MainLayout 组件，例如，从您分配一个属性的值字符串 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());
        }
    }
}

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

Is there any way to communicate to main layout of blazor pages

c#

components

blazor

blazor-server-side

MainLayout.razor