Razor父组件检测子组件是否存在

Question

我使用默认的Blazor服务器应用程序来构建登录页面。我正在创建我自己的UI"；框架"；的组件，我想看看是否可以让Parent组件检测是否有某个子组件。如果提供了子组件，则更改父组件的html结构。

使用组件的登录页面：

<Card Color="bg-info">
<CardHeader>Card Header</CardHeader>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardTitle SubTitle>Card Subtitle</CardTitle>
<CardText>Card text goes here...</CardText>
</CardBody>
<CardFooter>
<Spacer />
<Button Color="bg-danger">Cancel</Button>
<Button class="ms-2" Color="bg-primary" @onclick="Test">Ok</Button>
</CardFooter>
</Card>

卡(父(组件：

<div @attributes="AdditionalAttributes" class="@BaseCss" style="@BaseStyles">
@ChildContent
</div>

所以我要找的是，如果<Card>组件的消费者选择在<Card>内部使用<CardHeader>子组件，那么有问题地更改Card组件的html模板

类似这样的东西，但我不确定如何实现：

<div @attributes="AdditionalAttributes" class="@BaseCss" style="@BaseStyles">
@if (HEADER_COMPONENT_EXISTS) <----- How do i get this?
{
@HEADER_COMPONENT_HERE <------ How can i add this RenderFragment
<div class="card-body">
@ChildContent
</div>
}
else
{
<div class="card-body">
@ChildContent
</div>
}
</div>

Answer 1

CardHeader、CardBody和CardFooter组件是否在其他地方使用？如果没有，您可以直接在Card组件中使用这些参数，如下所示：

<div @attributes="AdditionalAttributes" class="@BaseCss" style="@BaseStyles">
@CardHeader
<div class="card-body">
@CardBody
</div>
@CardFooter
</div>
@code {
[Parameter]
public RenderFragment CardHeader { get; set; }
[Parameter]
public RenderFragment CardBody { get; set; }
[Parameter]
public RenderFragment CardFooter { get; set; }
}

如果在<Card> </Card>内部没有添加<CardHeader> </CardHeader>，则不会为@CardHeader呈现任何内容。

---

您可以通过对照null:来验证Parameter的存在

<div @attributes="AdditionalAttributes" class="@BaseCss" style="@BaseStyles">
@if (CardHeader != null)
{
@CardHeader
<!-- Other header-relevant content -->
}
@CardBody
</div>

---

注意：如果您也想保留ChildContent作为Card的参数，则需要将子内容封装在<ChildContent> </ChildContent>:中

<Card Color="bg-info">
<CardHeader><!--Header content--></CardHeader>
<CardBody><!--Body content--></CardBody>
<CardFooter><!--Footer content--></CardFooter>
<ChildContent><!--Other content--></ChildContent>
<!--Any content that goes here will get an error message-->
</Card>

如果任何组件采用多个RenderFragment类型的参数，则情况就是这样。