Blazor CascadingParameter - MainLayout.razor 和 NavMenu.razor 之间

Question

我有使用 VS Blazor 模板创建的基本 Blazor 应用程序。默认情况下，它会创建 MainLayout.razor 和 NavMenu.razor。 MainLayout 像这样托管 Navmenu：

<NavMenu/>

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

在 MainLayout.razor 我添加了：

 <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 始终为 Null。有任何想法吗？我错过了什么？

Answer 1

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

在 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，您可以这样做：

NavMenu.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";
 }