Question

我有基本的Blazor应用-用VS 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";
 }

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

1 个答案:

NavMenu.razor

NavMenu.razor