在Blazor中将值从子组件传递到父页面的良好做法

Question

我不确定使用我的方法将对象从子组件传递到Blazor中的消耗父页面是否犯了错误。我有一个poco类，ID为Name。从poco类obj列表中选择div的组件。。用户选择一个条目，该条目将显示在父页面上。我没有经验看到我的解决方案有任何问题。1( 我做对了吗？2( 如果一切正常，那么OnInitializedSync((有什么问题，没有等待(Parent(，我应该使用OnInitialized((吗？3( Dispose的使用是否正确？4( 如果我在一个应用程序中对不同的组件等使用相同的方法，可能20次，这个解决方案可以吗？这种规模可以吗？Thx nogood

ParentPage:

@page "/"
@inject MitarbeiterEventService MitarbeiterEventService
@implements IDisposable
<h1>ParentPage</h1>
<MitarbeiterSel></MitarbeiterSel>
<br />
@if (SelMitarbeiterFromChild != null)
{
<p>Selected Obj. from Child: @SelMitarbeiterFromChild.Name </p>
}
@code{
public MitarbeiterLite SelMitarbeiterFromChild;
protected override async Task OnInitializedAsync()
{
MitarbeiterEventService.EventMitarbeiterChangedInComp += HandelOnMitarbeiterChangedInComp;
}
public async void HandelOnMitarbeiterChangedInComp(object sender, MitarbeiterLite selMitarbeiter)
{
SelMitarbeiterFromChild = selMitarbeiter;
await InvokeAsync(() =>
{
StateHasChanged();
});
}
public void Dispose()
{
MitarbeiterEventService.EventMitarbeiterChangedInComp -= HandelOnMitarbeiterChangedInComp;
}
}

来自服务的代码(在实际的应用程序中，我使用MVVM，因此事件代码将在ViewModel中(：

public class MitarbeiterEventService
{
public event EventHandler<MitarbeiterLite> EventMitarbeiterChangedInComp;
public void FireEvent(MitarbeiterLite selMitarbeiterFromComp)
{
EventMitarbeiterChangedInComp?.Invoke(this, selMitarbeiterFromComp);
}
}

最后是它自己的组件：

@inject MitarbeiterEventService  MitarbeiterEventService
<h3>MitarbeiterSelection</h3>
<select class="form-control col-6" @onchange="@(x => OnMitarbeiterSelectedChanged(x.Value.ToString()))">
<option value="" disabled selected hidden>--Mitarbeiter--</option>
@foreach (var mita in MitarbeiterLitesLst)
{
<option value=@mita.Id>@mita.Name </option>
}
</select>
@code {
//Ini List 
public List<MitarbeiterLite> MitarbeiterLitesLst = new List<MitarbeiterLite>
{
new MitarbeiterLite("Henry"),
new MitarbeiterLite("John"),
new MitarbeiterLite("Sue"),
new MitarbeiterLite("Mary"),
new MitarbeiterLite("Jimmy")
};
public void OnMitarbeiterSelectedChanged(string guidAsString)
{
MitarbeiterEventService.FireEvent(MitarbeiterLitesLst.FirstOrDefault(x => x.Id.ToString() == guidAsString));
}
}

Answer 1

要与父级通信，请使用EventCallback。当事件的使用者不是父级或子级，而是应用程序中与选择项目的组件没有直接关系的其他组件时，事件服务更有用。

在你的场景中，我会选择：

组件

<h3> MitarbeiterSelection </h3>
<select class="form-control col-6"
@onchange="@(x => OnMitarbeiterSelectedChanged(x.Value.ToString()))">
<option value="" disabled selected hidden> --Mitarbeiter-- </option>
@foreach (var mita in MitarbeiterLitesLst)
{
<option value=@mita.Id>@mita.Name </option>
}
</select>
@code {
[Parameter]
public EventCallback<MitarbeiterLite> OnItemSelected { get; set; }
// Initialize List
public List<MitarbeiterLite> MitarbeiterLitesLst = new List<MitarbeiterLite>
{
new MitarbeiterLite("Henry"),
new MitarbeiterLite("John"),
new MitarbeiterLite("Sue"),
new MitarbeiterLite("Mary"),
new MitarbeiterLite("Jimmy")
};
public void OnMitarbeiterSelectedChanged(string guidAsString)
{
MitarbeiterLite selected =
MitarbeiterLitesLst
.FirstOrDefault(x => x.Id.ToString() == guidAsString);
OnItemSelected.InvokeAsync(selected);
}
}

父页面

@page "/"
<h1> ParentPage </h1>
<MitarbeiterSel OnItemSelected=@HandleOnMitarbeiterChangedInComp />
<br />

@if (SelMitarbeiterFromChild != null)
{
<p> Selected Obj. from Child: @SelMitarbeiterFromChild.Name  </p>
}

@code{
public MitarbeiterLite SelMitarbeiterFromChild;

public async Task HandelOnMitarbeiterChangedInComp(
MitarbeiterLite selMitarbeiter)
{
SelMitarbeiterFromChild = selMitarbeiter;
}
}