asp.net-core - 具有 @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

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

• 使用 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://learn.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 属性的服务类，该属性可以通过 服务注入(inject)到的组件。该服务类还应该提供一种将子组件提供的标题传递给 MainLayout 的方法，MainLayout 应该刷新自身以显示提供的标题...

希望这有帮助...