Как передать HTML / компоненты в шаблон Blazor?

Question

Вот мой случай:

У меня есть компонент Foo, и я хочу, чтобы у него был шаблон блазора Wrapper, который будет использоваться для переноса некоторой части содержимого 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# с помощью a }

6. Закройте вызов на Wrapper с помощью )

Таким образом, вы можете использовать RenderFragment, который принимает RenderFragment в качестве контекста.

Вывод этого будет

Это Foo

Что-то в обертке

Это происходит из Foo

Больше нет Foo

Вы можете проверить это здесь https://blazorfiddle.com/s/m3br8zpr