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

Posted 2023-02-23

【中文标题】有啥方法可以与 blazor 页面的主要布局进行通信

【英文标题】：Is there any way to communicate to main layout of blazor pages有什么方法可以与 blazor 页面的主要布局进行通信

【发布时间】：2021-06-03 04:42:13

【问题描述】：

这里我想将一些标题传递给 mainlayout.razor 页面，以便我的组件或页面可以更新标题的标题。 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 指令的路由器页面，用于在页面之间导航我希望该组件更新这个主布局有什么可能的方法吗？提前感谢您的帮助。

问候，

【问题讨论】：

你看过<Title> 组件吗？ github.com/dotnet/aspnetcore/pull/23833

@KirkWoll 那是别的东西，我已经将它用于窗口标题

【参考方案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());
        
    

【讨论】：

黄油一样的神奇作品。但是你能解释一下你是怎么想出这样做的吗？实际上，根据文档级联参数说我们可以将参数从祖先传递给 decestors

请参阅 Chris Sainty 的 3 Ways to Communicate Between Components in Blazor 文章中的选项 2，了解有关此方法的另一种解释。

@Humza Malik MindFreak，您可以将参数从父级传递到子级，这正是我所做的。注意：Title 属性不是参数，如果您碰巧引用了它。