直接在 Blazor 页面中编写 blazor 组件 HTML 元素的子元素

Question

在我的 Blazor WebAssembly 项目中，我有以下简单的 blazor component:

<video class="video-class">
    <source src="source_1" type="video/mp4" />
    <source src="source_2" type="video/mpeg" />
    Your browser isn't supported!
</video>

要在页面中使用此组件，我只需在 index.razor 页面中编写以下内容：

@page "/"

<RazorComponentExample>
</RazorComponentExample>

但是我想在 blazor component 中写下以下内容：

<video class="video-class">
    
</video>

在 index.razor 页面中，我想像这样使用组件：

@page "/"

<BlazorComponentExample>
    <source src="source_1" type="video/mp4" />
    <source src="source_2" type="video/mpeg" />
    Your browser isn't supported!
</BlazorComponentExample>

有什么想法吗？

Answer 1

您需要 RenderFragment，您的组件应如下所示：

<video class="video-class">
    @ChildContent
</video>

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

Answer 2

您的组件需要如下所示：

<video class="video-class">
  @ChildContent
</video>
@code {
[Parameter] public RenderFragment ChildContent { get; set; }
}

然后您的索引页就可以工作了。

Razor 对于开始标签和结束标签之间的内容的默认约定是将其“编码”为称为 ChildContent 的 RenderFragment（如果存在这样的属性）。然后，您可以通过将其声明为 @ChildContent.

将其放置在组件中您喜欢的位置

直接在 Blazor 页面中编写 blazor 组件 HTML 元素的子元素

writing child of a blazor component HTML element directly in a Blazor Page

c#

blazor

blazor-webassembly