如何使用foreach从父组件调用子组件方法

Question

我已经看到了如何使用该@ref属性从父组件调用子组件方法的示例，但是当我尝试将其与foreach循环一起使用时，只有最后渲染的组件的方法被调用，而不是全部。以下是我的组件的示例。

父组件：

<button type="button" class="btn btn-link" @onclick="BtnSyncAll_Click">Run<button>

@foreach(var site in Sites)
{
    <Site @ref="SiteView" @Code="@site"></Site>
}

@code {
    protected Site SiteView;
    protected List<string> Sites { get; set; } = new List<string>
    {
        "A00001",
        "A00002"
    };

    protected async Task BtnSyncAll_Click()
    {
        await SiteView.Sync();
    }
}

子组件（Site.razor）：

<div>
    <p>@Code>/p>
</div>

@code {
    [Parameter]
    public string Code { get; set; }

    protected async Task Sync()
    {
        await ...
    }
}

Answer 1

你和enet都把事情复杂化了......

最“政治上正确”的方法来做你假装的事情可能是创建一个独立的服务来向每个子组件发出信号何时需要重新同步，并通过 DI 注入它，但这将需要太多的管道，并且可能在你的如果是的话就不值得了。所以这里有一个更简单的方法：

首先，从组件中删除 Sync 方法，并将其更改为：

[Parameter]
public int SyncSignaler { get; set; }


protected override async Task OnParametersSetAsync()
{
    await Task.Delay(300);
    output = $"This is Site: {Code}";
    //StateHasChanged();
}

然后，在父组件上声明一个整数变量，将其传递给子组件，并在每次希望它们刷新时递增它。

在您的父组件中：

@foreach (var site in MySites)
{
    <Site Code="@site.Code" SyncSignaler="@syncIndicator"></Site>
}


@code {
 
    private int syncIndicator = 0;

    protected async Task BtnSyncAll_Click()
    {
        syncIndicator++;
        StateHasChanged();
    }

etc...

请让我知道它是否有效。干杯!