如何在Blazor SPA中动态添加元标签



我正在将我的Razor MVC网站转换为Blazor SPA。在我现有的网站中,我根据页面动态传递元标签值,例如

<head>
<meta property="og:title" content="@ViewBag.Title" />
</head>

有没有办法在Blazor实现同样的目标?在正文中添加元标签是无效的

有人已经做了很棒的工作,而且效果很好。

查看此链接以获取完整的代码和示例。

@* This is "Pages/Counter.razor" *@
@page "/counter"
<Meta Property="ogp:title" Content="Counter" />

您可以创建一个类似的新类

public class AppBase : ComponentBase
{
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
builder.OpenComponent<Head>(0);
builder.CloseComponent();
}
}

然后创建一个名为";头部";你把所有动态的东西都放在那里。

在_Host.cshtml上,在head标记中放入以下代码

<head>
<component type="typeof(AppBase)" render-mode="ServerPrerendered" />
<head>

并在Startup.cs 中添加作用域

services.AddScoped<AppBase>();

您可以在剃须刀组件中执行此操作

@page "/"
<HeadContent>
<link href='/Images/logo.svg' rel="icon" type="image/x-icon" />
<meta property="og:title" content="Your Title" />
</HeadContent>

最新更新