[英]Blazor MainLayout as a CascadingParameter always null
so...Im working on a Blazor Server app and having troubles with anderstanding of how a cascading parameters work and why my MainLayout returns always null.所以...我正在开发 Blazor Server 应用程序,在理解级联参数的工作方式以及为什么我的 MainLayout 始终返回 null 时遇到了麻烦。
Im doing it like this: MainLayout.razor:我是这样做的:MainLayout.razor:
<CascadingValue Value="this">
<PageTitle>Global</PageTitle>
<div id="wrapper">
<SfToolbar CssClass="dockToolbar">
<ToolbarEvents Clicked="@Toggle"></ToolbarEvents>
<ToolbarItems>
<ToolbarItem PrefixIcon="e-icons e-menu" TooltipText="Menu"></ToolbarItem>
<ToolbarItem>
<Template>
<div class="e-folder">
<div class="e-folder-name">Global</div>
</div>
</Template>
</ToolbarItem>
</ToolbarItems>
</SfToolbar>
<div id="main-content container-fluid col-md-12" class="maincontent">
<div>
<div class="content">@Body</div>
</div>
</div>
</div>
and Pages that behaves和行为的页面
SignIn.razor:登录.razor:
@page "/sign-in"
<ComponentLibrary.Components.AuthPage backUrl="/"></ComponentLibrary.Components.AuthPage>
@code {
[CascadingParameter]
public MainLayout? Layout { get; set; }
protected override void OnInitialized()
{
Layout.userModel = null;
Layout.RefreshSideBar();
base.OnInitialized();
}
}
But when im getting on SignIn page my Layout for some reason is null, any advices where need to look at?但是当我进入登录页面时,由于某种原因我的布局为空,有什么建议需要看吗?
i tried to just create a new example of Layout in other pages but that is tottaly not what i needed我试图在其他页面中创建一个新的布局示例,但这完全不是我需要的
Yes, you guys were right.是的,你们是对的。 I just noticed that there was 2 MainLayout files i miss that part, sorry.我刚刚注意到有 2 个 MainLayout 文件我错过了那部分,抱歉。 removing from project extra layout solves the problem从项目中删除额外的布局解决了这个问题
So let's try and recreate your problem.因此,让我们尝试重现您的问题。
Start with a standard Blazor server project.从标准的 Blazor 服务器项目开始。
@inherits LayoutComponentBase
<PageTitle>SO74799583</PageTitle>
<CascadingValue Value=this>
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>
</div>
</CascadingValue>
@code {
public string RenderTime = DateTime.Now.ToLongTimeString();
protected override bool ShouldRender()
{
RenderTime = DateTime.Now.ToLongTimeString();
return true;
}
}
And Index:和指数:
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<div class="bg-dark text-white p-2 m-2">
Main Component last rendered at: @(this.mainLayout?.RenderTime ?? "Not Rendered")
</div>
@code {
[CascadingParameter] private MainLayout? mainLayout { get; set; }
}
Which works: mainLayout
is not null.哪个有效: mainLayout
不为空。 So your not showing us everything.所以你没有向我们展示一切。
However, you should NEVER cascade or pass around a reference to a Comnponent.但是,您永远不应该级联或传递对组件的引用。
If you want to communicate between components create a state class and either:如果您想在组件之间进行通信,请创建一个状态类,并且:
Here's a simple example.这是一个简单的例子。
public class MyState
{
public string LastUpdateTime { get; private set; } = "Not Set";
public event EventHandler<string>? Updated;
public void SetTime()
{
this.LastUpdateTime = DateTime.Now.ToLongTimeString();
this.Updated?.Invoke(this, this.LastUpdateTime);
}
}
Layout:布局:
@inherits LayoutComponentBase
<PageTitle>SO74799583</PageTitle>
<CascadingValue Value=myState>
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
<div class="alert alert-info">@RenderTime</div>
@Body
</article>
</main>
</div>
</CascadingValue>
@code {
public string RenderTime = DateTime.Now.ToLongTimeString();
private MyState myState = new();
protected override void OnInitialized()
=> myState.Updated += OnUpdated;
private void OnUpdated(object? sender, string value)
=> StateHasChanged();
public void Dispose()
=> myState.Updated -= OnUpdated;
}
And Index:和指数:
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<div class="p-2 m-2">
<button class="btn btn-primary" @onclick=Update>Update Time</button>
</div>
@code {
[CascadingParameter] private MyState? myState { get; set; }
private Task Update()
{
myState?.SetTime();
return Task.CompletedTask;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.