将 blazor RenderFragment 从页面或组件模板化为布局

Question

我想在 blazor 的布局页面中包含可自定义的内容。我尝试向布局添加一个RenderFragment参数，并在组件中添加同名的化妆品，但它没有在我的布局中呈现。

layout.razor

<header>
    @HeaderContent
</header>

@body

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

component.razor

<HeaderContent>
    <p>my page specific content</p>
</HeaderContnt>

但它HeaderContent是在体内呈现的。有人能解释一下如何做到这一点吗？或者为什么它在布局中不可能？我发现有效的唯一方法是这样，但如果我更改 RenderFragment 中的绑定参数，它不会刷新内容。

Answer 1

• 灵活的内容
• 导航时清除
• 无需任何接线即可更新

MainLayout.razor.cs

@inherits LayoutComponentBase

...
    <div class="top-row px-4">
        @headerContent
    </div>

    <div class="content px-4">
        <CascadingValue Value="this">
            @Body
        </CascadingValue>
    </div>
...
@code {
    RenderFragment headerContent => setHeader?.ChildContent;
    SetHeader setHeader;

    public void SetHeader(SetHeader setHeader)
    {
        this.setHeader = setHeader;
        Update();
    }

    public void Update() => StateHasChanged();
}

塞特

public class SetHeader : ComponentBase, IDisposable
{
    [CascadingParameter]
    public MainLayout MainLayout { get; set; }

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

    protected override void OnInitialized()
    {
        MainLayout.SetHeader(this);
        base.OnInitialized();
    }

    protected override bool ShouldRender()
    {
        var shouldRender = base.ShouldRender();
        if (shouldRender)
        {
            MainLayout.Update();
        }
        return base.ShouldRender();
    }

    public void Dispose()
    {
        MainLayout?.SetHeader(null);
    }
}

用法

<SetHeader>
    <p>Current count: @currentCount</p>
</SetHeader>