Question

我正在构建我的第一个服务器端 Blazor 应用程序并使用 MudBlazor 组件集以及 MudBlazor Admin UI layout。

布局的一个特点是它有一个很好的面包屑组件，它们被放置在 MainLayout.razor Page Layout 中，如下所示；

<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 问题，结果证明它本质上是相同的 [而且更有趣]。 How can I modify the layout from a blazor page?

它有一个可行的解决方案，并进行了彻底的解释 - 但是我将这个问题悬而未决，以防在 Blazor 中存在从页面到页面布局的更明显和直接的通信方法。

Answer 1

<块引用>

如何与 PageLayout 中的 Page 进行交互？

为每页使用控制器。在Layout页面中，使用变量，它会被Controller控制。

Answer 2

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

我将使用带有对象的级联值，该对象将在您想要的任何内容发生更改时调用操作。
我将只使用字符串，但这确实适用于任何其他数据类型/对象。
另请注意，我使用 @bind-value 作为输入，因此它只会在更改时触发事件，而不是在输入时触发。

在 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; }
}

如何与 PageLayout 中的 Page 进行交互？

更新

2 个答案: