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

Question

我不确定在 Blazor 中使用我的方法将对象从子组件传递到其使用父页面时是否犯了错误。 我有一个带有 ID、名称的 poco 类。从 poco 类 obj 列表中选择 div 的组件。 用户选择一个条目，该条目应显示在父页面上。 我没有经验看到我的解决方案有任何问题。 1）我做对了吗？ 2）如果一切正常， OnInitializedAsync() 没有等待（父），我应该使用 OnInitialized() 代替吗？ 3) Dispose 的使用是否正确？ 4）如果我在一个应用程序中为不同的组件等使用相同的方法可能 20 次，这个解决方案可以吗？这个规模可以吗？ 谢谢，不好

父页面：

@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; } 

    //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)
    {
        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;
    }
}