时间戳

首页 > 解决方案 > 如何在 @Body 中使用 @bind-PropertyName

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

问题描述

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

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

如果不是@Body我有<PlainPage />组件，我会做<PlainPage @bind-PageTitle="_PageTitle" />. 但是我该怎么做呢@Body？

标签： bindblazor

解决方案

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

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

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

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

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

推荐阅读