具有 @Body 和更多属性的 Blazor WASM LayoutComponentBase答案

【问题标题】：Blazor WASM LayoutComponentBase with @Body and more properties具有 @Body 和更多属性的 Blazor WASM LayoutComponentBase
【发布时间】：2020-08-16 18:39:55
【问题描述】：

我的用例是我有 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 片段中。头元素中的标题元素也有同样的问题。这样做的最佳实践是什么（没有 js 互操作）？

【问题讨论】：

标签： asp.net-core razor blazor blazor-client-side

【解决方案1】：

有几种方法可以做到这一点...

使用 CascadingValue 功能在 MainLayout 中定义一个属性来获取子组件的标题，例如 about 组件。

在 MainLayout 中添加 CascadingValue 组件，并传递 MainLayout 组件作为 Value 属性的值。

在子组件中定义一个 CascadingParameter 属性，该属性存储 MainLayout 对象，并为其 Title 属性分配一个标题

这是完整的代码：

主布局

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

关于.razor

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

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

    protected override void OnInitialized()
   {

      MainLayout.Title = "About Title";

   }
 }

创建定义 Title 属性的服务类，该属性可由注入服务的组件。此服务类还应提供一种将子组件提供的标题传递给 MainLayout 的方法，MainLayout 应自行刷新以显示提供的标题...

希望这会有所帮助...

【讨论】：