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

Question

我的用例是 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";
}

我想避免将 <section> 放在 @body 片段中。 head-element 中的 title-element 也有同样的问题。执行此操作的最佳做法是什么（没有 js 互操作）？

Answer 1

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

使用级联值功能在 MainLayout 中定义一个属性以从 child 组件中获取标题，例如关于组件。

在MainLayout中添加一个CascadingValue组件，并通过MainLayout组件作为 Value 属性的值。

在 child 组件中定义一个 CascadingParameter 属性来存储 MainLayout object，并为其 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();
        }
     }
  }
}

About.razor

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

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

    protected override void OnInitialized()
   {

      MainLayout.Title = "About Title";

   }
 }

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

希望这对您有所帮助...

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

Blazor WASM LayoutComponentBase with @Body and more properties

razor

asp.net-core

blazor

blazor-client-side

主布局

About.razor