如何将 Task<Func<string>> 传递给 Blazor 组件？

Question

想象一下，我有一个像这样的 Blazor 组件（为清晰起见，非常简单）...

<code>@_html</code>

@code {
  private string _html = "";
}

在父组件中，有一个方法如下...

private async Task<string> GenerateHtml() {
  // Does something and returns some HTML
}

我希望父组件有一个按钮，当用户点击按钮时，GenerateHtml() 方法中的 return 值被设置在子组件的 Html局部变量。

这样做的原因是我会在很多地方重用子组件，每个地方都会有自己的方式来生成它想要的 HTML。我不想将生成代码放在子组件中，但我无法弄清楚如何将其推入。

我尝试遵循，但无法让它工作，部分原因是它在子组件中有按钮，部分原因是生成 HTML 的方法将是异步的.

我也试过用 EventCallback 来做这个，但也不知道该怎么做。

有人可以解释一下我应该怎么做吗？谢谢

Answer 1

总而言之，您希望提供一种方法，以便从子组件调用父组件的 GenerateHtml 方法。这很容易做到。您只需要一个与 Task<string> GenerateHtml() 的方法签名相匹配的委托类型。因为它 returns 一个值，所以它需要是 Func<> 变体之一，并且因为它不需要你想要的参数 Func<Task<string>>

因此，您的子组件应指定该类型的参数属性：

[Parameter]
public Func<Task<string>> HtmlGenerator { get; set; }

然后在父文件中，你可以有标记：

<ChildComponent HtmlGenerator="GenerateHtml" />

从那里，子组件可以通过调用 HtmlGenerator() 或 HtmlGenerator?.Invoke() 生成 HTML。

如何将 Task<Func<string>> 传递给 Blazor 组件？

How do I pass a Task<Func<string>> to a Blazor component?

blazor

blazor-server-side