blazor-server-side - 如何在 blazor 的 razor 组件内呈现内容？

Question

使用标签助手，您可以定义一个可以轻松编写内容的区域。例如，我可以制作一个引导卡片标签助手，并轻松地在卡片主体标签内呈现我想要的任何内容。使用剃须刀组件如何实现这一目标？

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

        @*render content here*@

    </div>
</div>

Answer 1

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

下面是来自默认 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 ://docs.microsoft.com/en-us/aspnet/core/blazor/templated-components?view=aspnetcore-3.1