Внедрение пользовательского сервиса в иерархию компонентов
У меня есть одноэлементный сервис, который я передаю в качестве параметра в Index.razor. Index.razor перерисовывается, когда я очищаю счетчик. Когда я передаю ту же услугу компоненту 1 и нажимаю кнопку «Увеличить количество», страница не отображается повторно. Если я перезагрузлю страницу, я увижу увеличение счетчика.
Thank you for your assistance.
ПС. Я не могу правильно отформатировать класс MyService. Я пробовал несколько раз. Мои извинения. Я новичок в переполнении стека.
Услуга
namespace Injection.Pages
{ открытый класс MyService { общественный int Counter {получить; набор; } публичная недействительность увеличенияCount() { Счетчик = Счетчик + 1;
}
public void clearCounter()
{
Counter = 0;
}
}
}
Индекс
@страница "/"
@inject MyService myService
<h3>Injection</h3>
<button @onclick = "clearCounter">Clear Count</button>
<br />
<br />
@myService.Counter
<Component1 myService = "myService" />
@code
{
private void clearCounter ()
{
myService.clearCounter();
StateHasChanged();
}
}
Компонент
<h3>Component1</h3>
<button @onclick = "increaseCount">Increase Count</button>
@code {
[Parameter]
public MyService myService { get; set; }
private void increaseCount()
{
myService.increaseCount();
StateHasChanged();
}
}
Спасибо за ваш ответ, Хенк. Когда я вводил непосредственно в компонент ContactForm и компонент ContactList, я получаю исходную ошибку. Счетчик увеличивается, но компонент ContactList не обновляется.
Инъекция – это не уведомление. Вам необходимо реализовать какой-то механизм уведомлений для вызова StateHasChanged() в компонентах прослушивания. Поиск INotifyPropertyChanged C# — это один из способов.
Я включил StateHasChanged() в AddContact(). Состояние меняется, поскольку обновляется счетчик на странице, но не подкомпонент ContactList. Спасибо
Как уже упоминалось, внедрение в _imports делает сервис глобально доступным в этой папке, но не уведомляет об изменении состояния. Передача параметра приводит к повторному рендерингу страницы. Вот пример github.com/claudiobernasconi/BlazorParametersAndState/tree/main/… Более того, я немного смущен pass it as a parameter ... which resolved the issue. Поскольку вы решили, вы должны были заметить правильные шаги и сосредоточиться на том, как понять логику рендеринга. Не могли бы вы объяснить, что вы подразумеваете под своими попытками и ошибками в комментариях?
Спасибо за ваш ответ, Фэнчжи. «Передача параметра приводит к повторному рендерингу страницы». Да, это правильно, когда я передаю Службу в качестве параметра в ContactList (второй в иерархии). Однако когда я передаю параметр из ContactList в компонент Contact (3d в иерархии), страница не перерисовывается. Этот дополнительный второй уровень передачи параметров не приводит к повторной визуализации страницы. Обратите внимание, что я использую StateHasChanged(), и он не выполняет повторный рендеринг.
@ Picard78 - тебе нужно показать какой-то реальный код или создать минимальный воспроизводимый пример. На данный момент представление кода, который у вас есть, — это чистая догадка. Такие утверждения, как «Обратите внимание, что я использую StateHasChanged(), и он не выполняет повторную визуализацию», ничего не значат, если вы не знаете, где и как вы его вызываете.
Понял. Я создам минимальный воспроизводимый пример.
Я привел минимальный пример кода. Пожалуйста, дайте мне знать, если этого достаточно. Прошу прощения за форматирование класса MyServices. Я несколько раз пытался исправить форматирование, но безуспешно. Спасибо.
Ответы 1
Таким образом, несмотря на то, что вы установили состояние, об изменении между компонентами не сообщается. Вот образец.
Услуга
public class MyService
{
public int Counter { get; set; }
public Action OnChange { get; set; }
public void increaseCount()
{
Counter += 1;
NotifyStateChanged();
}
public void clearCounter()
{
Counter = 0;
NotifyStateChanged();
}
private void NotifyStateChanged()
{
var task = Task.Run(() => OnChange?.Invoke());
}
}
Дом
@page "/"
@using BlazorApp71.Components.Pages
@inject MyService myService
<h3>Injection</h3>
<button @onclick = "clearCounter">Clear Count</button>
<br />
<br />
@myService.Counter
<Component1 myService = "myService" />
@code
{
protected override void OnInitialized()
{
myService.OnChange += async () => await InvokeAsync(StateHasChanged);
}
private void clearCounter()
{
myService.clearCounter();
}
public void Dispose()
{
myService.OnChange -= async () => await InvokeAsync(StateHasChanged);
}
}
Компонент
<h3>Component1</h3>
<button @onclick = "increaseCount">Increase Count</button>
@code {
[Parameter]
public MyService myService { get; set; }
protected override void OnInitialized()
{
myService.OnChange += async () => await InvokeAsync(StateHasChanged);
}
private void increaseCount()
{
myService.increaseCount();
}
public void Dispose()
{
myService.OnChange += async () => await InvokeAsync(StateHasChanged);
}
}
Существуют и другие подходы к взаимодействию между компонентами. https://chrissainty.com/3-ways-to-communicate-between-comComponents-in-blazor/ . Вы можете обратиться к этому для получения дополнительной информации.
Спасибо за решение, Фэнчжи. Оно работает! На этих выходных я пройдусь по коду и переварю его. Я новичок в Блазоре. Начал изучать C# 10 дней назад.
Делайте инъекции везде, где вам это нужно, и только там. _Imports предназначен для @include и не имеет
wrapдругих компонентов.