Blazor 共享 UI toastr 组件

Question

我刚刚开始了解服务器端 Blazor(不是 webassembly)，如果这是一个愚蠢的问题，请原谅我。

我想做的是提供可用于显示 toast 的服务。我使用的组件库来自 Syncfusion。我可以按照通常的方式很好地使用它，将它嵌入到需要它的每个组件上。

<SfToast ID="toast_default" @ref="Toaster" CssClass="e-toast-success" content="@ViewModel.ToastMessage" Timeout="2000" Icon="e-meeting">
     <ToastPosition X="Right" ></ToastPosition>
</SfToast>

我可以在后面的代码中使用它，它会按预期显示 toast 。

但是我有很多页面使用了这段代码，不想重复。我希望能够在 app.razor 中使用一次上述内容，然后获取对它的引用，然后在整个应用程序中使用它。例如，在 onIntializedAsync 中，我获得了对 Toaster 的引用，将其保存到注入(inject)的服务中。然后我在整个应用程序中使用相同的服务。

我编写了上面的代码，但 Toaster 在服务中始终为 null。

    public class MessageService
    {
        public SfToast Toaster { get; set; }

        public async Task SendMessage(string message)
        {
            if(this.Toaster!= null)
            {
                await this.Toaster.Show(new ToastModel() { Content = message });
            }
        }
    }

这是 App.razor 中的代码。我已逐步完成代码，它正确地设置了对 Toaster 的引用，但是当消息服务试图让它使用它时，它是空的。

@code {

    public SfToast Toaster { get; set; }

    protected override Task OnInitializedAsync()
    {
        this.MessageService.Toaster = this.Toaster;
        return base.OnInitializedAsync();
    }
}

还有其他方法吗？还是我犯了什么错误？

Answer 1

根据@nAviD 的回答，我这样做了:

MainLayout.razor 设置级联参数。 toastr 组件在 MessageService 中设置了一个@ref。

@inherits LayoutComponentBase
@using JusticeOnTheWeb.Core

<CascadingValue Value="MessageService">
    <div class="content">
        @Body
    </div>
</CascadingValue>

<SfToast ID="toast_default" @ref="MessageService.Toaster" CssClass="e-toast-success" Timeout="2000" Icon="e-meeting">
    <ToastPosition X="Right"></ToastPosition>
</SfToast>

@code{

    public MessageService MessageService { get; set; } = new MessageService();

}

然后它被 MyComponent.razor 消耗:

<SfButton @onclick="ShowMessage">Show Message</SfButton>


@code {

    [CascadingParameter]
    public MessageService MessageService { get; set; }

    public void ShowMessage()
    {
        this.MessageService.Show("42");
    }
}