如何在 Blazor SPA 中动态添加元标记答案

【问题标题】：How to add meta tags dynamically in Blazor SPA如何在 Blazor SPA 中动态添加元标记
【发布时间】：2020-06-23 07:06:48
【问题描述】：

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

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

有没有办法在 Blazor 中实现相同的目标？在正文中添加元标记是invalid

【问题讨论】：

标签： blazor blazor-client-side

【解决方案1】：

你可以创建一个像这样的新类

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

然后创建一个名为“Head”的剃须刀页面，您可以在其中放置所有动态内容。

在 _Host.cshtml 中，在 head 标签内放置以下代码

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

并在 Startup.cs 中添加范围

services.AddScoped<AppBase>();

【讨论】：

【解决方案2】：

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

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

@* This is "Pages/Counter.razor" *@
@page "/counter"

<Meta Property="ogp:title" Content="Counter" />

【讨论】：

如果想给_Host.cshtml添加一个需要NavigationManager的标签，比如og:url标签，把它放在MainLayout.razor文件里