如何从页面布局与页面交互

Question

我正在构建我的第一个服务器端Blazor应用程序，并使用MudBrazor组件集和MudBraZor管理UI布局。

布局的一个特点是它有一个很好的breadcrumb组件，他们将其定位在MainLayout.razor页面布局中，如下所示；

<MudBreadcrumbs Items="_items"></MudBreadcrumbs>
@Body
@code {
private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
{
new BreadcrumbItem("Personal", href: "#"),
new BreadcrumbItem("Dashboard", href: "/personal/dashboard"),
};
}

如您所见，MudBreadcrumbs组件使用_items方法中的项进行填充，并且两者都位于PageLayout的MainLayout.razor文件中。

我可以看到页面内容在@Body占位符处被引用和呈现。到目前为止，我有大约15个页面，我想使用面包屑来显示每个当前页面的正确详细信息，这意味着每个页面都需要定义自己的_items集合。

如何在页面级别创建_items集合，并使其可供PageLayout中的MudBreadcrumbs组件访问？

更新

我最终遇到了这个SO问题，结果发现它基本上是一样的[而且更有趣]。如何修改blazor页面的布局？

它有一个可行的解决方案，并得到了充分的解释——然而，我将保留这个问题，以防在Blazor中有一种更明显、更直接的方法来处理从页面到页面布局的通信。

Answer 1

如何从PageLayout与页面交互？

每页使用控制器。在布局页面中，使用变量，它将由控制器控制。

Answer 2

类似于您在更新中链接到的帖子中的答案，但有点不同+完整的工作解决方案。

• 我将对一个对象使用级联值，该对象将在您想要的更改时调用一个操作
• 我将只使用字符串，但这可以用于任何其他数据类型/对象
• 还要注意，我使用@bind值作为输入，因此它只会在更改时触发事件，而不会在输入时触发事件

在MainLayout.razor或任何父容器(在我的情况下是Index.razor(中：

@page "/"
@implements IDisposable
<h1>@container.UserInput</h1>
<input @bind-value="container.UserInput" />
<CascadingValue Value="container">
<CascadingTest></CascadingTest>
</CascadingValue>
@code {
protected override void OnInitialized()
{
testingClass.OnChange += StateHasChanged;
}
public YourContainer container= new();

public void Dispose()
{
testingClass.OnChange -= StateHasChanged;
}

YourContainer类：

public class YourContainer 
{
private string userInput= "default";
public string UserInput
{
get => this.userInput;
set
{
if (this.userInput == value) return;
this.userInput= value;
this.Changed();
}
}
public event Action OnChange;
public void Changed() => OnChange?.Invoke();
}

最后，子组件：

<label>@containerName.UserInput</label>
<input @bind-value="containerName.UserInput"/>
@code {
[CascadingParameter]
YourContainer containerName{ get; set; }
}