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

Question

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

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

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

这就像Winform应用程序中ApplicationContext.MainForm的概念。

Answer 1

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

@inherits LayoutComponentBase

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

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

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

</CascadingValue>

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

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

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

Answer 2

使用注册服务（单例或范围）怎么样？该服务实现了当子组件想要显示警报时引发的事件。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
    }
}

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