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

【问题标题】：How to use @bind-PropertyName withing @Body如何在 @Body 中使用 @bind-PropertyName
【发布时间】：2020-04-04 05:20:21
【问题描述】：

我有一个包含许多页面的项目。结构是：包含菜单、标题和上下文的父页面。任务是将一些字符串从上下文页面发送到标题。问题是：如何在@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; }
}

头组件：

<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 呢？

【问题讨论】：

看这个：stackoverflow.com/questions/59629257/…

标签： bind blazor

【解决方案1】：

最简单的方法是使用“上下文”页面可以用来回调布局的 CascadingValue。

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

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

在您的 MainLayout 的 @code 中创建一个公共方法

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

并且在您的“上下文”代码中使用 CascadingParameter

[CascadingParameter] MainLayout mainLayout {get;set;}

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

【讨论】：