Asp.net core Blazor WASM LayoutComponentBase具有@Body和更多属性

我的用例是我有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 razor片段的页面标题

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

我想避免把@body碎片放进去。

---

head元素中的title元素也有同样的问题。没有js interop的最佳实践是什么？

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

使用CascadingValue特性 在MainLayout中定义属性，以从子组件（例如）获取标题 关于组件

将CascadingValue组件添加到MainLayout，并传递MainLayout组件 作为值属性的值

在子组件中，定义存储 MainLayout对象，并为其标题属性指定标题

以下是完整的代码：

主布局 关于剃刀 创建一个服务类，该服务类定义可由设置的标题属性 将服务注入其中的组件。此服务类还应提供一种将子组件提供的标题传递给MainLayout的方法，MainLayout应刷新自身以显示提供的标题。。。

---

希望这有帮助…

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

使用CascadingValue特性 在MainLayout中定义属性，以从子组件（例如）获取标题 关于组件

将CascadingValue组件添加到MainLayout，并传递MainLayout组件 作为值属性的值

在子组件中，定义存储 MainLayout对象，并为其标题属性指定标题

以下是完整的代码：

主布局 关于剃刀 创建一个服务类，该服务类定义可由设置的标题属性 将服务注入其中的组件。此服务类还应提供一种将子组件提供的标题传递给MainLayout的方法，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();
        }
     }
  }
}  

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

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

    protected override void OnInitialized()
   {

      MainLayout.Title = "About Title";

   }
 }