Blazor级联参数-在MainLayout.razor和NavMenu.razor之间

Question

我有一个基本的Blazor应用程序-使用VS Blazor模板创建。默认情况下，它会创建MainLayout.razor和NavMenu.razor。MainLayout托管导航菜单，如下所示：

<NavMenu/>

我需要传递一个值(从MainLayout到Navmenu的对象(来更新导航按钮。我正在尝试使用CascadingParameter，但似乎无法使其工作。

在MainLayout.rarzor中，我添加了：

<CascadingValue Value="@X" >
<NavMenu/>
</CascadingValue>

和

@code {
public string X { get; set; }

和

protected override async Task OnInitializedAsync()
{
X = "PASS SOMETHING";

在NavMenu.razor中，我添加了以下

@code {
[CascadingParameter]
string X { get; set; }

然后

protected override async Task OnInitializedAsync()
{
Console.WriteLine(X);

但是X总是空的。有什么想法吗？我错过了什么？

Answer 1

由于NavMenu是MainLayout的子组件，因此可以将组件参数传递给NavMenu。执行以下操作：

在NavMenu中定义公共属性以存储从父传递的值

导航菜单.razor

@code {
[Parameter]
public string Value { get; set; }
}

在MainLayout中这样做：

<div class="sidebar">
<NavMenu Value="@SomeValue" />
</div>

@code{
private string SomeValue = "A value from MainLayout";
}

仅此而已。。。

然而，如果你坚持使用CascadingValue，这在当前情况下确实不合适，你可以这样做：

导航菜单.razor

@code {
[CascadingParameter]
public string Value { get; set; }
protected override async Task OnInitializedAsync()
{
Console.WriteLine(Value);
await Task.CompletedTask;
}
}

在MainLayout中这样做：

<div class="sidebar">
<CascadingValue Value="@SomeValue">
<NavMenu />
</CascadingValue>
</div>

@code{
private string SomeValue = "A value from MainLayout";
}