时间戳

首页 > 解决方案 > 如何在 blazor 组件中呈现模板？

blazor - 如何在 blazor 组件中呈现模板？

问题描述

我试图通过 c# 在 blazor 中呈现模板。

我浏览过微软文档。他们建议使用 RenderFragment。但我无法获得实现这一目标的正确方法。

标签： blazor

解决方案

定义一个简单的 FilmList 组件，它只循环传入的电影。 FilmTemplate 属性是一个模板参数。模板参数使模板化组件与普通组件不同。

模板参数允许您定义组件的一个区域，该区域将在渲染时使用组件使用者提供的模板。它们可以定义为 RenderFragment 或 RenderFragment 。我稍后会介绍通用版本。

FilmList.razor:

<div>
  @foreach (var film in Films)
  {
    @FilmTemplate(film)
  }
</div>

@code{
  [Parameter] RenderFragment FilmTemplate { get; set; }
  [Parameter] IReadOnlyList Films { get; set; }
}

用法：

<FilmList Films="@Films">
  <FilmTemplate>
    <div>@context.Title (@context.YearReleased)</div>
  </FilmTemplate>
</FilmList>

@code {
  public List Films { get; set; } = new List {
    new Film("Pulp Fiction", "1994", "pulp-fiction.jpg"),
    new Film("Bad Boys II", "2003", "bad-boys2.jpg"),
    new Film("The Fast and the Furious", "2001", "tfatf.jpg"),
    new Film("The Greatest Showman", "2017", "greatest-showman.jpg")
  };
}

为了使用 FilmList 组件，我们必须为电影定义一个模板。这是使用与模板参数名称匹配的元素完成的，在我们的例子中。

来源：https ://visualstudiomagazine.com/articles/2018/12/01/blazor-templated-components.aspx

希望这会有所帮助...如果您有任何问题或不清楚的地方，请随时提问。

推荐阅读