如何从页面触发 blazor 布局方法?

Question

>我有最简单的剃须刀服务器应用程序，它是在创建新解决方案时默认创建的。 我正在寻找解决方案，以便在不使用 JS 的情况下从我的页面在我的布局中设置参数。 这是主布局：

@nherits LayoutComponentBase
<div class="page @deviceCssClass">
<div><h3><@Title</h3></div>
<div class="content px-4">
@Body
</div>
</div>
@code
{
[Parameter]
public string Title { get; set; }
}

这是我的App.razor，它为我的页面实现路由：

应用剃刀：

<CascadingAuthenticationState>
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView  RouteData="@routeData"  DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>

这是我使用MainLayout的页面：

Login.razor：

@inject AuthenticationStateProvider AuthenticationStateProvider
@inject NavigationManager Navigation
@inherits LayoutComponentBase
<AuthorizeView>
<Authorized>
<a href="Identity/Account/Manage">Hello, @context.User.Identity.Name!</a>
<a href="" vclass="nav-link btn btn-link" @onclick="(() => Logout())">Log out</a>
</Authorized>
<NotAuthorized>
<a href="/Account/Register">Register</a>
<a href="/Account/Login">Log in</a>
</NotAuthorized>
</AuthorizeView>

问：在我的主布局中，我有@Title属性。此布局由许多页面使用。 如何从页面设置布局@Title？让我们从Login.razor页面开始。

Answer 1

我想我用这个答案解决了它： 从 Blazor 中的页面组件调用 MainLayout 中的方法

主布局：

<CascadingValue Value=SetTitleEvent>
@Body
</CascadingValue>
...
...
@code {
public EventCallback<string> SetTitleEvent => EventCallback.Factory.Create<string>(this, SetTitle);
public void SetTitle(string t)
{
Title = t;
}
}

和剃须刀页面：

[CascadingParameter]
protected EventCallback<string> SetTitleEvent { get; set; }
protected override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
SetTitleEvent.InvokeAsync("Login");
return base.OnAfterRenderAsync(firstRender);
}