时间戳

首页 > 解决方案 > 如何从子组件中获取对 Blazor MainLayout 的引用

blazor - 如何从子组件中获取对 Blazor MainLayout 的引用

问题描述

我在我的 Blazor 服务器端应用程序的 MainLayout 中放置了一些全局 Blazor 组件。它们用于显示警报、确认、警告、...

从子组件中，如何获取对 MainLayout 的引用以调用我的全局警报、确认函数？

子组件是动态的，可以在任何嵌套级别。所以我们不知道从它到根 MainLayout 有多少层。

类似于 Winform 应用中 ApplicationContext.MainForm 的概念。

标签： blazorblazor-server-side

解决方案

您可以使用 CascadingValue 组件将 MainLayout 组件的引用级联到其子级及其后代，如下所示：

@inherits LayoutComponentBase

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

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

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

</CascadingValue>

在子组件中，您应该定义一个接收引用的 CascadingParameter 属性，如下所示：

 [CascadingParameter]
 public MainLayout Layout { get; set; }

现在您可以从子组件中做一些有趣的事情。

推荐阅读