在 Blazor 页面上检索自定义 Blazor 组件的所有实例答案

【问题标题】：Retrieve all instances of a custom Blazor component on a Blazor page在 Blazor 页面上检索自定义 Blazor 组件的所有实例
【发布时间】：2020-02-16 21:08:27
【问题描述】：

我想在 Blazor 页面上获取 Blazor 组件的所有实例：

页面：

<div class="mb-4 pt-3">
    <SearchFilter Refinement="@refinementAuthor" FilterTitle="Auteur"></SearchFilter>
</div>
<div class="mb-4 pt-3">
    <SearchFilter Refinement="@refinementSubject" FilterTitle="Onderwerp"></SearchFilter>
</div>
<div class="mb-4 pt-3">
    <SearchFilter Refinement="@refinementLanguage" FilterTitle="Taal"></SearchFilter>
</div>

如何获得三个“SearchFilter”的列表？

【问题讨论】：

标签： c# blazor

【解决方案1】：

我相信目前 Blazor 中不存在这样的功能。但是，您可以通过将组件引用（@ref 指令属性）添加到列表对象来创建组件列表，如下所示：

ChildComponent.razor

<h3>@Title</h3>

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

}

用法

<ChildComponent @ref="ChildComponent1" Title="ChildComponent 1"/>
<ChildComponent @ref="ChildComponent2" Title="ChildComponent 2" />
<ChildComponent @ref="ChildComponent3" Title="ChildComponent 3" />

@if (components != null)
{
   @foreach (var component in components)
  {
    <p>@component.Title</p>
  }

}

@code{
  ChildComponent ChildComponent1;
  ChildComponent ChildComponent2;
  ChildComponent ChildComponent3;

  List<ChildComponent> components;

  protected override void OnAfterRender(bool firstRender)
  {
    if (firstRender)
    {
        components = new List<ChildComponent>();
        components.Add(ChildComponent1);
        components.Add(ChildComponent2);
        components.Add(ChildComponent3);

        StateHasChanged();
    }
   }

}

请注意，该列表仅在页面组件呈现后才会填充。您之前无法访问这些组件，因为它们尚未创建...

【讨论】：