Blazor WASM LayoutComponentBase с @Body и другими свойствами - PullRequest
Новая
       138

Blazor WASM LayoutComponentBase с @Body и другими свойствами

0 голосов
/ 02 мая 2020

Мой пример использования: у меня MainLayout.razor с этим кодом 

@inherits LayoutComponentBase
<header><nav ....></header>
<section><h1>Page Title</h1><section>
<main class="container">
    <div class="row"><div class="col-12">@Body</div></div>
</main>

Теперь я хочу установить заголовок страницы для каждого фрагмента @Body бритвы (возможно, по наследству) 

@page "/about"
<div>....</div>
@code {
    Title = "About Title";
}

Я хочу не вставлять <section> внутрь фрагмента @body. Также есть такая же проблема с title-element из head-element. Что такое лучшие практики для этого (без js взаимодействия)?

1 Ответ

2 голосов
/ 02 мая 2020

Есть несколько способов сделать это ...

  • Использование функции CascadingValue Определите свойство в MainLayout для получения заголовка от дочерних компонентов, таких как компонент about.

    Добавьте компонент CascadingValue в MainLayout и передайте компонент MainLayout в качестве значения атрибута Value.

    В дочернем компоненте определите свойство CascadingParameter, в котором хранится объект MainLayout, и назначьте заголовок его свойству Title

    Вот полный код:

MainLayout 

<div class="main">
    <div class="top-row px-4 auth">
        <h1>@Title</h1>
        <LoginDisplay />
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

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

</div>

@code
{
  string title;

  public string Title
 {
    get => title;
    set
    {
        if(title != value)
        { 
            title = value;
            StateHasChanged();
        }
     }
  }
}

About.razor 

@page "/about"
<div>....</div>

@code {
    [CascadingParameter]
    public MainLayout MainLayout { get; set; }

    protected override void OnInitialized()
   {

      MainLayout.Title = "About Title";

   }
 }

  • Создать класс сервиса, который определяет свойство Title, которое может быть установлено компонентами, в которые сервис внедряется , Этот класс обслуживания должен также обеспечивать способ передачи заголовка, предоставленного дочерними компонентами, в MainLayout, который должен сам переопределить sh, чтобы отобразить предоставленный заголовок ...

    компонентов. Надеюсь, это поможет ...

...