Blazor-эквивалент ng-шаблона

Question

Компонент Angular может иметь произвольное количество дочерних шаблонов, на которые он ссылается. Например, я мог бы создать компонент Foo, который указывает некоторое встроенное содержимое тела вместе с шаблонами для дополнительного содержимого:

<Foo>
    This is my body
    <ng-template #header>
        This is my header
    <ng-template>
    <ng-template #footer>
        This is my footer
    <ng-template>
<Foo>

Компонент Foo может ссылаться на эти шаблоны как «ChildContent» и использовать их в своей разметке:

<div>
    <h1>
         <ng-template [ngTemplateOutlet]="header"></ng-template>
    </h1>
    <div>
       <p>Hi! I'm a Foo. My body content:</p>
       <p><ng-content></ng-content></p>
    </div>
    <h3>
         <ng-template [ngTemplateOutlet]="footer"></ng-template>
    </h3>
</div>

Таким образом, мой пример использования Foo (первый пример кода выше) будет представлен в DOM как:

    <div>
        <h1>
             This is my header
        </h1>
        <div>
           <p>Hi! I'm a Foo. My body content:</p>
           <p>This is my body</p>
        </div>
        <h3>
             This is my footer
        </h3>
    </div>

Что является эквивалентом в Blazor? Другими словами, я хотел бы иметь возможность определять компонент Foo таким образом, чтобы он мог быть передан для рендеринга фрагментов, встроенных в его дочернюю разметку содержимого.

Answer 1

Blazor использует класс и свойство RenderFragment для создания областей шаблона.

В приведенном ниже примере у нас есть шаблоны для верхнего и нижнего колонтитула, как вы описали в своем примере Angular.

<div>
        <h1>
             @HeaderTemplate
        </h1>
        <div>
             <p>Hi! I'm a Foo. My body content:</p>
             <p>@ChildContent</p>
        </div>
        <h3>
             @FooterTemplate
        </h3>
    </div>

@code {

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

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

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

}

Использование:

    <Foo>
        <HeaderTemplate>
             This is my header
        </HeaderTemplate>
        <ChildContent>
           <p>This is my body</p>
        </ChildContent>
        <FooterTemplate>
             This is my footer
        </FooterTemplate>
    </Foo>

Примечание. Порядок шаблонов в примере использования не имеет значения.

Неверный Использование:

    <Foo>
        <!-- this will fail, because Blazor cannot determine where the <p> content belongs. -->
        <p>This is my body</p>
        <HeaderTemplate>
             This is my header
        </HeaderTemplate>
        <FooterTemplate>
             This is my footer
        </FooterTemplate>
    </Foo>