如何在@Body 中使用@bind-PropertyName

Question

我有一个包含很多页面的项目。结构为：Parent 包含菜单、header 和上下文的页面。任务是将一些字符串从上下文页面发送到 header。问题是：如何在 @Body 上使用 @bind-PropertyName？

MainLayout.razor:

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">

    <div class="top-row px-4">
        <Header PageTitle="@_PageTitle" />
    </div>
        <div class="content px-4">
            @Body
        </div>
</div>
@code{
    private string _PageTitle { get; set; }
}

Header分量：

<div>Title: @PageTitle</div>
@code {
    [Parameter]
    public string PageTitle { get; set; }
}

上下文组件：

@page "/plainpage"
<div> @PageTitle </div>

<Content />

@code{
    [Parameter]
    public string PageTitle { get; set; } = "Plain Page";

    public EventCallback<string> Initialized { get; set; }

    protected override void OnInitialized()
    {
        OnPageInitialized(); 
    }

    private Task OnPageInitialized()
    {
        return Initialized.InvokeAsync(PageTitle);
    }
}

如果我有 <PlainPage /> 组件而不是 @Body，我会做 <PlainPage @bind-PageTitle="_PageTitle" />。但是我如何用 @Body 来做呢？

Answer 1

最简单的方法是使用 "context" 页面可以用来回调布局的 CascadingValue。

因此，在您的 MainLayout 中，将 @Body 包装在 CascadingValue 中

<div class="content px-4">
  <CascadingValue Value=@this>
  @Body
  </CascadingValue>
</div>

在 MainLayout 的 @code 中创建一个 public 方法

public void SomeMethod(string SomeString)
{
  // Do Something With SomeString like setting PageTitle
}

并在您的 "context" 代码中使用 CascadingParameter

[CascadingParameter] MainLayout mainLayout {get;set;}

protected override void OnInitialized()
{
  mainLayout.SomeMethod(PageTitle);
}

如何在@Body 中使用@bind-PropertyName

How to use @bind-PropertyName withing @Body

bind

blazor