Blazor 共享 UI Toaster 组件答案

【问题标题】：Blazor Shared UI Toaster ComponentBlazor 共享 UI Toaster 组件
【发布时间】：2021-02-20 19:18:20
【问题描述】：

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

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

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

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

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

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

    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();
    }
}

还有其他方法可以做到这一点吗？还是我犯了一些错误？

【问题讨论】：

我注入了一个作用域服务。该服务有ShowMessage 方法。我的SfToast 仅在主布局上。主布局为作用域服务设置了一个委托，该委托能够通过 toast 显示消息。当您对作用域服务说要显示消息时，它会使用此委托。
最简单的方法是使用 CascadeParameter
@nAviD，谢谢，我认为你是对的。如果您想发布作为答案，我会接受。
@daniherrera，我不确定您所说的“主要布局设置代表”是什么意思。你能解释更多吗？

标签： blazor blazor-server-side

【解决方案1】：

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

MainLayout.razor 设置级联参数。 toaster 组件在 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");
    }
}

【讨论】：

【解决方案2】：

最简单的方法是使用CascadeParameter。

【讨论】：