如何在Blazor派生组件中嵌入基组件内容？

实现步骤 #

1. 创建基组件 #

直接编写包含基础HTML内容的基组件（例如BaseComponent.razor）：

<!-- 基组件的原生内容 -->
<div class="base-container">
    <h3>基组件标题</h3>
    <p>这是基组件的默认内容</p>
</div>

2. 创建派生组件并嵌入基组件内容 #

创建派生组件（例如DerivedComponent.razor），通过@inherits继承基组件，然后在需要嵌入基组件内容的位置使用@base：

@inherits BaseComponent

<!-- 派生组件的装饰性内容 -->
<div class="derived-wrapper">
    <span>my derived decoration</span>
    <!-- 此处嵌入基组件的全部内容 -->
    @base
</div>

代码优先场景的处理（可选） #

如果使用代码优先的组件类（而非Razor文件），派生类可在BuildRenderTree方法中调用基类的渲染逻辑：

public class DerivedComponent : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        // 先渲染派生组件的装饰内容
        builder.OpenElement(0, "div");
        builder.AddContent(1, "<span>my derived decoration</span>");
        
        // 调用基类方法渲染基组件内容
        base.BuildRenderTree(builder);
        
        builder.CloseElement();
    }
}

效果说明 #

运行后，派生组件会将基组件的完整内容嵌入到指定位置，最终生成的HTML结构与你期望的一致：

<div class="derived-wrapper">
    <span>my derived decoration</span>
    <div class="base-container">
        <h3>基组件标题</h3>
        <p>这是基组件的默认内容</p>
    </div>
</div>

内容的提问来源于stack exchange，提问作者greenoldman