Как использовать @ bind-PropertyName в @Body - PullRequest
1 голос
/ 04 апреля 2020

У меня есть проект со многими страницами. Структура: Родительская страница, которая включает в себя Меню, заголовок и контекст. Задача состоит в том, чтобы отправить некоторую строку из контекстной страницы в заголовок. Вопрос: как мне использовать @bind-PropertyName на @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?

1 Ответ

1 голос
/ 04 апреля 2020

Самый простой способ - использовать CascadingValue, который «контекстные» страницы могут использовать для обратного вызова макета.

Итак, в вашем MainLayout оберните @Body в CascadingValue

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

В @code вашего MainLayout создайте метод publi c

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