Blazor 父组件布局

Question

组件库的定义类似于

<div>Parent component</div>
@ChildContent
<div>Footer Parent component</div>

@Code {

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

}

子组件是

@layout ParentComponent

<div>child component layout</div>

因此，渲染的 html 只是子元素 我们只看到

child component layout

我在谷歌上搜索并找到了一些类似this 的结果

child component layout
Panret component
child component layout
Footer Parent component

这意味着子组件被渲染了两次！

这种结构就像魅力一样在“页面”上工作！！！ 如果我添加

@page "/ChildComponent" 

到 ChildComponent 并导航到它，它正确呈现。 这个问题只有当我们将它用作页面的组件时才出现

Answer 1

使用@layout 指令的布局仅在通过导航到使用@page 指令定义的路由直接访问页面时才有效。布局不适用于组件层次结构。

如果有父组件想要在某个“布局”中嵌入子组件，那么子组件要么也需要包含该布局，要么父组件需要显式添加它。