如何在Blazor中的Razor组件中呈现内容？

Question

如何在Blazor中的Razor组件中呈现内容？

4

使用标签助手，您可以定义一个区域，在该区域内轻松编写内容。例如，我可以创建一个Bootstrap卡片标签助手，并在卡片正文标签内轻松呈现所需内容。那么，使用Razor组件，我该如何实现这一点呢？

<div class="card">
    <div class="card-header"></div>
    <div class="card-body">

        @*render content here*@

    </div>
</div>

- Jackal

2个回答

0

只是为了补充Gopa的回答。您还可以使用多个RanderFragment属性，并将属性名称指定为HTML标签，以区分它们。

@*StoryComponent*@

<div>
 <span>@this.Title</span><br>
 <span>@this.Body</span>
</div>

@code {
    [Parameter] public string Title { get; set; }
    [Parameter] public string Body{ get; set; }
}

使用方法如下：

<StoryComponent>
  <Title>Title ABC</Title>
  <Body>Body 123</Body>
</StoryComponent>

- TheLegendaryCopyCoder

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gopa · Accepted Answer

可以使用名为RenderFragment的类实现模板化组件。它们的实现方式与参数属性相同，但它们捕获在组件标记内声明的内容。

以下是默认Blazor项目中的示例。我更新了SurveyPromt组件以接受问题内容，如下所示：

<div class="alert alert-secondary mt-4" role="alert">
    <span class="oi oi-pencil mr-2" aria-hidden="true"></span>
    <strong>@Title</strong>

    <span class="text-nowrap">
       @ChildContent
        <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2127996">brief survey</a>
    </span>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

这里是我如何将内容传递给调查组件的方式。

<SurveyPrompt Title="How is Blazor working for you?">
     <i class="carousel-control-next-icon"></i>Please take our survey below
</SurveyPrompt>

你也可以将RenderFragment类型化，了解更多信息请点击以下链接： https://learn.microsoft.com/en-us/aspnet/core/blazor/templated-components?view=aspnetcore-3.1