Blazor в Angular нравится при выборе контента - PullRequest
Новая
       15

Blazor в Angular нравится при выборе контента

1 голос
/ 20 апреля 2020

Angular Пример

profile-contact.component. html

<!-- Media -->
<gx-media-icon-card class="mb-5" label="Mail">
    <gx-icon name="mail" size="xl" class="mr-5" icon></gx-icon>
    <a href="javascript:void(0)" text>{{contactDetail.email}}</a>
</gx-media-icon-card>
<!-- /media -->

<!-- Media -->
<gx-media-icon-card class="mb-5" label="Web Page">
    <gx-icon name="link" size="xl" class="mr-5" icon></gx-icon>
    <a href="javascript:void(0)" text>{{contactDetail.website}}</a>
</gx-media-icon-card>
<!-- /media -->

<!-- Media -->
<gx-media-icon-card label="Phone">
    <gx-icon name="phone-o" size="xl" class="mr-5" icon></gx-icon>
    <span class="h5" text>{{contactDetail.mobile}}</span>
</gx-media-icon-card>
<!-- /media -->

gx-media-icon-card.component. html

<ng-content select=[icon]></ng-content>

<!-- Media Body -->
<div class="media-body">
    <span class="d-block text-light-gray f-12 mb-1">{{label}}</span>
    <ng-content select=[text]></ng-content>
</div>
<!-- /media body -->

Как видите, angular можно расположить где угодно, сказав select=[icon] и select=[text]. В таком случае, по какому пути я должен идти в своем блейзоре?

1 Ответ

0 голосов
/ 20 апреля 2020

Для этого вы используете RenderFragment свойство типа. Ваш пример будет примерно таким:

MediaIconCard.razor 

@Icon

<div class="media-body">
    <span class="d-block text-light-gray f-12 mb-1">@Label</span>
    @Text
<div>

@code
{
    [Parameter]
    public RenderFragment Icon { get; set; }

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

И ProfileContact.razor 

<MediaIconCard>
    <Icon>
        <i class="fa fa-at></i>
    </Icon>
    <Text>
         <a href="javascript:void(0)">@ContactDetail.Email</a>
    </Text>
</MediaIconCard>

<MediaIconCard>
    <Icon>
        <i class="fa fa-link></i>
    </Icon>
    <Text>
         <a href="javascript:void(0)">@ContactDetail.Website</a>
    </Text>
</MediaIconCard>

<MediaIconCard>
    <Icon>
        <i class="fa fa-mobile></i>
    </Icon>
    <Text>
         <a href="javascript:void(0)">@ContactDetail.Mobile</a>
    </Text>
</MediaIconCard>
...