0

这是我的情况：

我有一个组件Foo，我希望它有一个名为的 blazor 模板Wrapper，该模板将用于包装Foo's 的某些内容。

我需要做的是

正常使用：

<Foo>
    <Wrapper>
        <div>
            <p>Something in the wraper</p>
            @context // context should be some content of Foo
        </div>
    </Wraper>
</Foo>

里面Foo

@* Other content of Foo*@

@if(Wrapper != null){
    @* Pass to Wrapper some content of Foo *@
    Wrapper(@* How to render html/components here? *@)
}

@* Other content of Foo*@

但是有没有办法为模板传递html或组件？

我怎样才能做到这一点？

4

1 回答 1

4

在这种情况下，您的 Wrapper 是您想要接受另一个 RenderFragment 的 RenderFragment，因此它的签名将是

[Parameter] public RenderFragment<RenderFragment> Wrapper {get;set;}

这是完整的 Foo.razor

@* Other content of Foo*@
<h1>This is Foo</h1>

@if(Wrapper != null){
    @* Pass to Wrapper some content of Foo *@
    @Wrapper(
        @<h2>This comes from Foo</h2>
    )
}

<h1>There is no more Foo</h1>

@code 
{
    [Parameter] public RenderFragment<RenderFragment> Wrapper {get;set;}
}

仔细注意对 Wrapper 的调用中的构造。

  1. 从@Wrapper 开始，这是来自 Razor 的调用

  2. (Wrapper 之后的开放让你回到 C# 领域，所以 -

  3. 用于@交换回 Razor 代码。

  4. 现在您可以使用 Razor/HTML 标记<h2>This comes from Foo</h2>

  5. Wrapper用 a关闭呼叫)

这就是您可以使用将 RenderFragment 作为其上下文的 RenderFragment 的方式。

输出将是

这是福

包装盒里的东西

这来自 Foo

没有更多的Foo

你可以在这里测试一下https://blazorfiddle.com/s/ox4tl146

于 2020-03-25T16:42:19.660 回答