Blazor OnParametersSet не вызывается после обновления значения параметра
Я думаю, что я, должно быть, что-то пропустил здесь... Я думал, что OnParametersSet будет вызываться, если я назначу новое значение параметру, но, похоже, это не так. Я пытаюсь сделать повторный рендеринг компонента каждый раз, когда я присваиваю ему новое значение одного из его параметров.
Например, ниже приведена страница, содержащая компонент «Часы». Каждую секунду я обновляю значение параметра.
@code {
public TimeSpan Duration { get; set; }
public Timer Updater { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
this.Duration = TimeSpan.FromMinutes(60);
this.Updater = new System.Timers.Timer(1000);
Updater.Elapsed += OnTimerElapsed;
Updater.Enabled = true;
}
private void OnTimerElapsed(Object source, ElapsedEventArgs eventArgs)
{
this.Duration = this.Duration.Add(TimeSpan.FromSeconds(-1));
Debug.WriteLine($"New Duration is {this.Duration.ToString()}");
}
}
<Clock Value = "@this.Duration" />
Ниже показан компонент часовой бритвы.
@code {
[Parameter]
public TimeSpan Value { get; set; }
}
<div class = "clock">
<div class = "minutes">@this.Value.Minutes</div>
<div class = "min-sec-separator">:</div>
<div class = "seconds">@this.Value.Seconds</div>
</div>
Было бы очень признательно, если бы кто-нибудь мог указать мне, что мне здесь не хватает.
Дайте значение TimeSpan, я ожидал, что это должно работать без какого-либо вмешательства.
Взгляните на learn.microsoft.com/en-us/aspnet/core/blazor/components/…
Ответы 3
Вы не устанавливаете параметр для OnTimerElapsed, вы только меняете значение локального поля. Параметр устанавливается при рендеринге компонента.
Компонент будет отображаться при изменении состояния.
Вы можете инициировать изменение состояния, вызвав StateHasChanged(), когда вам это нужно.
Думаю, я понимаю, что вы говорите. Я как бы надеялся, что мне не нужно делать StateHasChanged() в родительском компоненте, но компонент часов обнаружит, что «Значение» является параметром для этого компонента... Я могу ошибаться, но не будет ли это по существу повторно отображать весь родительский компонент означает, что это будут не только часы, но и все остальное, принадлежащее этому родителю?
вызовите метод на часах, и этот метод может вызывать StateHasChanged только на часах
Попробуйте (родитель):
@using System.Timers
@code {
public TimeSpan Duration { get; set; }
public Timer Updater { get; set; }
protected override void OnInitialized()
{
this.Duration = TimeSpan.FromMinutes(60);
this.Updater = new System.Timers.Timer(1000);
Updater.Elapsed += OnTimerElapsed;
Updater.Enabled = true;
base.OnInitialized();
}
private void OnTimerElapsed(Object source, ElapsedEventArgs eventArgs)
{
this.Duration = this.Duration.Add(TimeSpan.FromSeconds(-1));
StateHasChanged();
Console.WriteLine($"New Duration is {this.Duration.ToString()}");
}
}
<Clock Value = "@this.Duration" />
И Clock.razor (ребенок):
@code {
[Parameter]
public TimeSpan Value { get; set; }
}
<div class = "clock">
<div class = "minutes">@this.Value.Minutes</div>
<div class = "min-sec-separator">:</div>
<div class = "seconds">@this.Value.Seconds</div>
</div>
https://blazorrepl.telerik.com/mmFmbRvB17tQXjRy37
Для объяснения см. ответ @MrCakaShaunCurtis.
если я правильно понимаю, StateHasChanged() на родительском уровне означает, что я повторно визуализирую весь родительский компонент, включая все его дочерние компоненты, правильно? Я только хочу повторно визуализировать компонент Clock, обновив его значение, чтобы другие дочерние компоненты не беспокоились об этом запросе на рендеринг...
@maciek - причина того, что рендеринг не происходит, заключается в том, что OnTimerElapsed - это обычный обработчик событий, а не событие пользовательского интерфейса - более подробно см. мой ответ ниже.
@MrCakaShaunCurtis Вы прямо здесь. Я попробовал blazorrepl.telerik.com/GmlmbSOX26iuxRWS02 и это не работает, как я себе представлял. Я отредактировал свой ответ и добавил ссылку на ваш ответ.
Ответ @Buga правильный, но вам нужно понять, почему.
ComponentBase реализует IHandleEvent. Когда этот интерфейс реализован, все события, управляемые пользовательским интерфейсом, вызывают метод IHandleEvent.HandleEventAsync, передавая обработчик и аргументы события. Реализация ComponentBase вызывает StateHaschanged, когда (если обработчик асинхронный и уступает) и после выполнения обработчика.
Однако OnTimerElapsed — это обычный обработчик событий, поэтому автоматический вызов StateHasChanged невозможен. Это один из немногих случаев, когда вам нужно вызвать его вручную.
который обрабатывает все события, управляемые пользовательским интерфейсом.
Спасибо за дополнительное объяснение @MrC. Что мне до сих пор неясно, так это то, что случилось с самим «[Parameter] public TimeSpan Value {get; set;}». Я думал, что он обнаружит присвоенное ему значение и заставит сам компонент часов инициировать новый рендеринг или, по крайней мере, вызвать OnParametersSet... но ничего не произошло.
Здесь нет автоматизированного процесса. Когда родитель визуализирует, средство визуализации проверяет «ParameterList» каждого дочернего элемента, чтобы определить, изменились ли какие-либо, а затем вызывает SetParametersAsync для любого дочернего элемента, где «могло» произойти изменение. Чтобы вносить изменения автоматически, переместите таймер в службу и используйте шаблон уведомлений — stackoverflow.com/a/69562295/13065781
Вот еще похожий ответ - stackoverflow.com/questions/74530150/…
попробуйте вызвать
StateHasChanged(), когдаDurationизменено