20行代码写一个简单 Blazor 时钟组件
群里有些同学询问怎么实现定时刷新界面, 那咱们写点试试看能不能达到需求.
代码比较简单, 就是Task每秒刷新页面. 然后封装为组件实现只局部刷新.
Demo
TimerAme.razor
<p>@Label @DateTime.Now.ToLongTimeString()</p>
TimerAme.razor.cs
using Microsoft.AspNetCore.Components;public partial class TimerAme : ComponentBase, IDisposable
{[Parameter]public string Label { get; set; } = "时间:";private CancellationTokenSource? AutoRefreshCancelTokenSource { get; set; }protected override void OnInitialized() => worker();/// <summary>/// Dispose 方法/// </summary>public void Dispose() => AutoRefreshCancelTokenSource = null;public void worker(){AutoRefreshCancelTokenSource = new CancellationTokenSource();_ = Task.Run(async () =>{try{while (!(AutoRefreshCancelTokenSource?.IsCancellationRequested ?? true)){await InvokeAsync(StateHasChanged);await Task.Delay(TimeSpan.FromSeconds(1), AutoRefreshCancelTokenSource?.Token ?? new CancellationToken(true));}}catch (TaskCanceledException) { }});}
}
使用组件
<TimerAme />