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(); }}
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) { NotificationService.Dismiss(notification.Id)" /> } }@code { private void HandleNotificationsChanged() => StateHasChanged(); protected override void OnInitialized() { NotificationService.OnNotificationsChanged += HandleNotificationsChanged; } public void Dispose() { NotificationService.OnNotificationsChanged -= HandleNotificationsChanged; }}
3. 创建可复用的通知 UI 组件（NotificationItem.razor）
封装单条通知的样式与交互，支持手动关闭、动画入场/离场（可用 CSS transition 或第三方库如 blazored-toast）：
@using System.Text.RegularExpressions@Notification.Message@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 和定位控制。进阶可加队列限流、点击跳转、自定义模板、声音提示等。
以上就是Blazor 怎么实现一个全局通知服务的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1442940.html
微信扫一扫 
支付宝扫一扫 
