使用参数渲染 Blazor child 组件

Question

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

我想找出正确的方法

渲染一个 child 组件
来自 parent 个组件
点击按钮（表单提交）
将 parent 组件的参数传递给 => child 组件

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

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

我的 parent 组件 看起来像这样：

查看 (parent)

// 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>
}

代码隐藏 (parent)

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

我的 child 组件 看起来像这样：

查看 (child)

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

代码隐藏 (child)

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

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

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

Answer 1

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

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

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

特别是，以下声明应该对您的情况有用（来自link）：

OnInitialized / OnInitializedAsync

This method is only executed once when the component is first created. If the parent changes the component’s parameters at a later time, this method is skipped.

似乎只需更改您重写的方法就可以解决您的问题，因为 OnParametersSetAsync 的行为与您描述的一样，而 'OnInitializedAsync' 的行为与您想要的一样。 :D

使用参数渲染 Blazor child 组件

Render Blazor child component with parameters

c#

components

webassembly

blazor

.net-5