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

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

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

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

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

stack overflow How to get reference to the Blazor MainLayout from a child component
原文答案
author avatar

接受的答案

您可以使用 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; }

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


答案:

作者头像

使用注册服务(单例或范围)怎么样。该服务实现了当子组件想要显示警报时引发的事件。 MainLayout 侦听警报服务的事件,如果引发新事件,则 MainLayout 显示警报。

该服务可能如下所示:

 public class AlertService
{
    public event EventHandler<AlertEventArgs> AlertMessageChanged;

    protected virtual void OnAlertMessageChanged(AlertEventArgs e)
    {
        EventHandler<AlertEventArgs> handler = AlertMessageChanged;
        if (handler != null)
        {
            handler(this, e);
        }
    }

    public void SetAlertMessage(string alertMessage)
    {
        var eventArgs = new AlertEventArgs();
        eventArgs.AlertMessage = alertMessage;
       OnAlertMessageChanged(eventArgs);
    }
}

在 AlertEventArgs 中可能有一个属性“AlertMessage”或类似的东西。在 MainLayout 中为 **OnAlertMessageChanged** 事件注册一个事件处理程序

@inherits LayoutComponentBase
@inject AlertService alertService   

<div class="main">
   ...
</div>

@code { 

    override void OnInitialized()
    {
        base.OnInitialized();
        alertService.AlertMessageChanged += HandleAlertMessageChanged;
    }

    private void HandleAlertMessageChanged(AlertEventArgs args)
    {
        //Show the alert
    }
}

对于确认或警告,您可以扩展现有服务或创建新服务,当然,您需要注册服务。