Question

如何将参数传递到剃须刀组件中？

到目前为止，我尝试过

@(await Html.RenderComponentAsync<Rateplan>(RenderMode.ServerPrerendered, new { id= 100}))

但是我收到一个错误

InvalidOperationException：使用以下方式预渲染服务器组件参数不受支持。

我使用RenderMode.ServerPrerendered尝试了相同的操作，但收到错误

InvalidOperationException：具有参数的服务器组件不是支持。

我也尝试过

<Rateplan Id="100"></Rateplan>

但是那甚至没有启动组件。

Answer 1

in this article中描述了问题和解决方法。（有一个小错误，因为GetModel应该命名为GetCustomerId）完全按照Exception的说法，不支持传递参数。

您可以等待ASP.NET Core 3.1 where the ability to pass parameters will be restored。

我已经实现了第一篇文章中针对参数OperationId的解决方案-剃刀组件的代码：

using Microsoft.JSInterop;

[Inject]
protected IJSRuntime jrt { get; set; }

protected async override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        try
        {
            var oid = await jrt.InvokeAsync<string>("GetOperationId");
            int opid;
            if (int.TryParse(oid, out opid))
                OperationId = opid;
        }
        catch (Exception ex)
        {
            ls?.LogException(ex, "Sortiment.OnAfterRenderAsync");
        }
        //This code was moved from OnInitializedAsync which executes without parameter value
        if (OperationId.HasValue)
            sortiment = await ProductService.GetSortimentAsync(null, OperationId, Odpady);
        else
            productFilter = await ProductService.GetProductFilterAsync();
        StateHasChanged(); //Necessary, because the StateHasChanged does not fire automatically here
    }
}

并将其添加到托管剃刀页面：

@section Header
{
  <script>
  function GetOperationId() {
    return "@Model.OperationId";
  }
  </script>
}

此解决方法仅适用于RenderMode.Server。

Answer 2

在要接受参数的组件中，需要将属性标记为参数

喜欢

[Parameter]
public List<Player> Players { get; set; }

那么您应该可以将参数传递为

<Componentname param-Players="@players"></Componentname>

（在此示例中，@players是局部变量）

Answer 3

将RenderMode设置为静态

@(await Html.RenderComponentAsync<Rateplan>(RenderMode.Static, new { id = 100 }))

如何在服务器端Blazor中将参数传递给剃刀组件？

3 个答案: