如何将html / components传递给blazor模板？

Question

这是我的情况：

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

我需要做的是类似

常规用法：

<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或组件吗？

我该怎么做？

Answer 1

在这种情况下，您的包装器是一个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. 包装器打开后的(将您带回到C＃领域，所以-

3. 在新行中，使用@:交换回Razor代码，然后使用@{启动C＃块

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

5. 在新行上，用}

   关闭C＃块

6. 使用Wrapper

   关闭对)的呼叫

这就是使用RenderFragment作为上下文的RenderFragment的方式。

输出将是

这是Foo

包装中的东西

这是来自Foo

没有了Foo

您可以在https://blazorfiddle.com/s/m3br8zpr

进行测试