Question

我只是在服务器端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的引用，但是当消息服务试图使其使用时，它为null。

@code {

    public SfToast Toaster { get; set; }

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

还有另一种方法吗？还是我犯了一些错误？

Answer 1

基于@nAviD的回答，我做到了：

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

Answer 2

最简单的方法是使用CascadeParameter。

Blazor共享UI Toaster组件

2 个答案: