CascadingParameter -介于MainLayout.razor和NavMenu.razor之间

Question

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

<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永远是空的。有什么想法吗？我遗漏了什么？

Answer 1

因为NavMenu是MainLayout的子组件，所以可以将组件参数传递给NavMenu。做以下工作：

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

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