使用参数渲染Blazor子组件

Question

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

我试着找出去的正确方法

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

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

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

1. 我的父组件如下所示：

• 视图(父级(

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

2. 我的子组件如下所示：

• 视图(子项(

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

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

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

Answer 1

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

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

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

特别是，以下陈述在您的情况下(从该链接(应该是有用的：

OnInitialized/OnInitializedSync

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

似乎只需更改覆盖的方法就可以解决问题，因为OnParametersSetAsync的行为与您所描述的一样，而"OnInitializedAsync"的行为则与您所希望的一样。：D