从页面或组件将blazor RenderFragment模板化为布局 [英] template a blazor RenderFragment to a layout from a page or component

问题描述

我希望在blazor的布局页面中具有可自定义的内容.我尝试过在布局中添加一个renderfragment参数，并在组件中添加具有相同名称的化妆，但它并未在布局中呈现

例如

  layout.razor:< header>@HeaderContent</header>@身体@代码{[参数] public RenderFragment HeaderContent {get;放;}}component.razor:< HeaderContent>< p>我的页面特定内容</p></HeaderContnt> 

，但是headercontent呈现在正文中.任何人都可以解释如何执行此操作，或者为什么无法在布局中进行解释.我发现可行的唯一方法是

I want to have customizable content in my layout page in blazor. I have tried adding a renderfragment parameter to the layout and adding makeup with the same name in my component but it is not rendered in my layout

eg

layout.razor:

<header>
    @HeaderContent
</header>
@body

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

}
component.razor:

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

but the headercontent is rendered in the body. can anybody explain how to do this, or why its not possible in a layout. The only way I have found that works is this but it wont refresh the content if I change a bound parameter inside the render fragment

解决方案

• Flexible Content
• Clears on Navigation
• Updates without any wiring up

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();
}

Setter

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);
    }
}

Usage

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

这篇关于从页面或组件将blazor RenderFragment模板化为布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！