Question

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

如何从子组件中获取对MainLayout的引用，以调用我的全局Alert，Confirmation函数？

子组件是动态的，可以处于任何嵌套级别。因此我们不知道从它到根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://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; }

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

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
    }
}

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

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

2 个答案: