使用参数渲染 Blazor 子组件答案

【问题标题】：Render Blazor child component with parameters使用参数渲染 Blazor 子组件
【发布时间】：2021-06-28 04:21:06
【问题描述】：

我是 Blazor 新手，目前正在开发 Blazor Webassembly .net 5.0 应用程序。

我试图找出正确的方法

渲染子组件
来自父组件
点击按钮（表单提交）
将参数从父组件传递给 => 子组件

我当前的解决方案似乎可行，但不幸的是它以无限渲染循环结束：我在子组件中使用OnParametersSetAsync 方法来处理数据加载。

旁注：我使用 Telerik Blazor 组件，但它应该没有影响。

我的父组件如下所示：

查看（父级）

// I want to submit a form to set a bool = true, and then to rend the child component - is that ok?
<EditForm OnValidSubmit="@(async () => await StartEverything())">
            <label for="OrderNumber">OrderNumber: </label>
            <TelerikTextBox @bind-Value="OrderNumber" Id="OrderNumber" />
            <TelerikButton ButtonType="@ButtonType.Submit">Start Everything</TelerikButton>
</EditForm>


@if (ShowChild)
{
    <MyChildComponent OrderNumber="OrderNumber"/>
}
else
{
    <div>Please enter an order number.</div>
}

代码背后（父级）

public class MyParentComponent : ComponentBase {

 protected int OrderNumber { get; set; }

 protected bool ShowChild { get; set; }

 protected async Task StartEverything()
 {
     if (OrderNumber > 0)
     {
         await Task.FromResult(ShowChild = true);
     }
 }
}

我的子组件如下所示：

查看（儿童）

@if (Customer != null)
{
      <p>@Customer.CustomerName</p>
      <p>@Customer.AgencyName</p>
}

代码背后（子）

public class MyChildComponent : ComponentBase {

 // I need this Parameter sent from my parent component
 [Parameter]
 public int OrderNumber { get; set; }

 protected CustomerViewModel Customer { get; set; }

 protected override async Task OnParametersSetAsync()
 {
     var parameterForQuery = OrderNumber; // this should hold the value sent from the parent component

     // Load Customer ViewModel Data here - is this the correct event? What is the best approach?
 }
}

项目视图模型

public class CustomerViewModel 
{
   public string CustomerName { get; set; }

   public string AgencyName { get; set; }  
}

您知道如何在父组件中正确渲染子组件并将参数从父组件传递给子组件 - 然后仅在按钮单击时渲染子组件（表单提交，没有无限渲染循环）？

你知道如何解决这个问题吗？

【问题讨论】：

标签： c# components blazor webassembly .net-5

【解决方案1】：

我建议通过https://blazor-university.com。当我第一次开始使用 Blazor 时，正是这个网站让我开始了。

关于你的问题，我建议如下：

https://blazor-university.com/components/component-lifecycles/

特别是，以下语句应该证明对您的情况有用（来自该链接）：

OnInitialized / OnInitializedAsync

该方法仅在组件首次创建时执行一次。如果父级稍后更改组件的参数，则此方法被跳过。

似乎只需更改您覆盖的方法就可以解决您的问题，因为OnParametersSetAsync 的行为与您所描述的一样，而“OnInitializedAsync”的行为也如您所愿。 :D

【讨论】：