Blazor 怎么实现一个全局通知服务
Blazor全局通知服务通过创建NotificationService管理通知队列并触发UI更新，配合NotificationItem组件渲染，注册为scoped服务后在任意组件中注入调用Show()方法即可显示通知。
Blazor 实现全局通知服务，核心是创建一个可被任意组件注入、跨页面共享状态的 Service，并配合一个统一的 UI 组件（如 Toast 或 Banner）来渲染通知。关键在于状态管理 + 组件通信 + 生命周期控制。
1. 定义通知数据模型和通知服务
先定义一个轻量通知类，包含类型（Success/Info/Error/Warning）、内容、持续时间、是否自动关闭等字段：
public class Notification
{
public string Id { get; } = Guid.NewGuid().ToString();
public string Message { get; set; } = string.Empty;
public NotificationType Type { get; set; } = NotificationType.Info;
public int DurationMs { get; set; } = 5000;
public bool AutoDismiss { get; set; } = true;
}
public enum NotificationType
{
Info, Success, Warning, Error
}
然后创建 NotificationService，用 List 管理队列，提供添加、移除、清空方法。注意用 INotifyPropertyChanged 或 Blazor 的 StateHasChanged() 机制触发 UI 更新——推荐用 EventCallback 或 Subject（配合 Rx.NET）或更简单的方式：直接暴露一个 EventCallback 委托供 UI 订阅：
public class NotificationService
{
private readonly List _notifications = new();
public event Action? OnNotificationsChanged;
public IReadOnlyList Notifications => _notifications.AsReadOnly();
public void Show(string message, NotificationType type = NotificationType.Info, int durationMs = 5000)
{
var notification = new Notification
{
Message = message,
Type = type,
DurationMs = durationMs
};
_notifications.Add(notification);
OnNotificationsChanged?.Invoke();
if (notification.AutoDismiss)
{
_ = Task.Delay(durationMs).ContinueWith(_ =>
{
Dismiss(notification.Id);
});
}
}
public void Dismiss(string id)
{
_notifications.RemoveAll(n => n.Id == id);
OnNotificationsChanged?.Invoke();
}
public void Clear()
{
_notifications.Clear();
OnNotificationsChanged?.Invoke();
}
}
if (notification.AutoDismiss)
{
_ = Task.Delay(durationMs).ContinueWith(_ =>
{
Dismiss(notification.Id);
});
}
}
public void Dismiss(string id)
{
_notifications.RemoveAll(n => n.Id == id);
OnNotificationsChanged?.Invoke();
}
public void Clear()
{
_notifications.Clear();
OnNotificationsChanged?.Invoke();
}
}
2. 注册服务并注入到根组件
在 Program.cs（.NET 6+）中注册为 scoped 服务：
builder.Services.AddScoped();
在 App.razor 或 MainLayout.razor 顶部注入服务，并订阅变化：
@inject NotificationService NotificationService
@if (NotificationService.Notifications.Any())
{
@foreach (var notification in NotificationService.Notifications)
{
3. 创建可复用的通知 UI 组件（NotificationItem.razor）
封装单条通知的样式与交互，支持手动关闭、动画入场/离场（可用 CSS transition 或第三方库如 blazored-toast）：
@using System.Text.RegularExpressions
@code {
[Parameter] public Notification Notification { get; set; } = default!;
[Parameter] public EventCallback OnDismiss { get; set; }
private string GetCssClass() => $"notification-{Notification.Type.ToString().ToLower()}";
private string GetIcon()
{
return Notification.Type switch
{
NotificationType.Success => "✓",
NotificationType.Error => "✗",
NotificationType.Warning => "⚠",
_ => "ℹ"
};
}
}
CSS 示例（加到 wwwroot/css/app.css 或组件内）：
.notification-container {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 350px;
}
.notification {
padding: 0.75rem 1rem;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
display: flex;
align-items: center;
gap: 0.5rem;
animation: slideInRight 0.3s ease-out;
transition: opacity 0.3s, transform 0.3s;
}
.notification:not(:first-child) { margin-top: 0.25rem; }
.notification-info { background: #e3f2fd; color: #1565c0; }
.notification-success { background: #e8f5e9; color: #2e7d32; }
.notification-warning { background: #fff8e1; color: #f57c00; }
.notification-error { background: #ffebee; color: #c62828; }
.notification-close {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
margin-left: auto;
color: inherit;
opacity: 0.7;
}
.notification-close:hover { opacity: 1; }
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
4. 在任意组件中使用通知
哪里需要就在哪里 @inject NotificationService，调用 Show() 即可：
@inject NotificationService NotificationService
@code {
private void ShowSuccess() =>
NotificationService.Show("操作已成功！", NotificationType.Success);
}
支持异步操作后通知：
private async Task SubmitForm()
{
try
{
await httpClient.PostAsJsonAsync("/api/save", model);
NotificationService.Show("保存成功", NotificationType.Success);
}
catch
{
NotificationService.Show("保存失败，请重试", NotificationType.Error);
}
}
基本上就这些。不复杂但容易忽略的是：服务生命周期要匹配（scoped 最常用）、UI 订阅/取消订阅要配对、避免内存泄漏（尤其用委托事件时），以及通知叠加时的 z-index 和定位控制。进阶可加队列限流、点击跳转、自定义模板、声音提示等。
