时间戳

首页 > 解决方案 > Blazor：在子组件中显示父组件的内容

c# - Blazor：在子组件中显示父组件的内容

问题描述

我正在为 Blazor 中的组件继承而苦苦挣扎。我想创建一个 MyComponentBase.razor包含基本布局的基本组件。MyComponent.razor继承自组件MyComponentBase.razor并包含内容。

我的问题是 Blazor 应用程序中的页面仅显示MyComponent.razor组件的内容，而不显示组合内容。我找不到任何解释如何做到这一点的例子。任何人都可以帮忙吗？

MyComponentBase.razor

@inherits ComponentBase

<div>
    <p>My Title</p>
    <p>My SubTitle</p>
    @ChildContent
</div>

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

MyComponent.razor

@inherits MyComponentBase

<p>My Content</p>

MyPage.razor

@page "/page"

<MyComponent/>

预期结果

<div>
    <p>My Title</p>
    <p>My SubTitle</p>    
    <p>My Content</p>
</div>

实际结果

<p>My Content</p>

标签： c#.netblazor

解决方案

继承时，您会覆盖 RenderTree。这就是为什么MyComponent只显示它的文本。

您也不需要ComponentBase在.razor文件中继承。你有两个（好的）选择。布局或模板。

Layout（又名MyComponentBase）

@inherits LayoutComponentBase

<div>
    <p>My Title</p>
    <p>My SubTitle</p>
    @Body
</div>

然后像下面这样使用它：
MyComponent

@layout MyComponentBaseLayout

<p>My Content</p>

您几乎拥有的模板方法。
您只需更改MyComponent为

<MyComponentBase>
    <p>My Content</p>
</MyComponentBase>

推荐阅读