Как визуализировать контент внутри компонента бритвы в Blazor?

С помощью помощников тегов вы можете определить область, в которой вы можете легко писать контент. Например, я мог бы создать помощник тега начальной загрузки карты и легко визуализировать все, что я хочу внутри тега тела карты. Как я могу этого добиться с помощью компонентов бритвы?

<div class="card">
    <div class="card-header"></div>
    <div class="card-body">

        @*render content here*@

    </div>
</div>
Источник

2 ответа

Решение

Шаблонные компоненты могут быть реализованы с помощью класса RanderFragment. Они реализуются так же, как свойство параметра, но захватывают содержимое, объявленное внутри тегов компонентов.

Ниже приведен пример из проекта Blazor по умолчанию. Я обновил компонент SurveyPromt, чтобы он отображал подобный контент вопроса

<div class="alert alert-secondary mt-4" role="alert">
    <span class="oi oi-pencil mr-2" aria-hidden="true"></span>
    <strong>@Title</strong>

    <span class="text-nowrap">
       @ChildContent
        <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2127996">brief survey</a>
    </span>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

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

Вот как я передаю контент в компонент Survey

<SurveyPrompt Title="How is Blazor working for you?">
     <i class="carousel-control-next-icon"></i>Please take our survey below
</SurveyPrompt>

Вы также можете набрать RenderFragment, подробнее об этом читайте здесь: https://docs.microsoft.com/en-us/aspnet/core/blazor/templated-components?view=aspnetcore-3.1

Источник

Просто добавлю к ответу Гопы. Вы также можете использовать несколько свойств RanderFragment и указать имя свойства в качестве тега HTML, чтобы различать их.

      @*StoryComponent*@

<div>
 <span>@this.Title</span><br>
 <span>@this.Body</span>
</div>

@code {
    [Parameter] public string Title { get; set; }
    [Parameter] public string Body{ get; set; }
}

Использование будет:

      <StoryComponent>
  <Title>Title ABC</Title>
  <Body>Body 123</Body>
</StoryComponent>
Источник
Другие вопросы по тегам