Blazor 动态添加 Head 内容方法

Blazor中动态修改head内容需使用内置HeadOutlet组件配合HeadContent块。必须在根布局（如App.razor）中添加，并在组件内用包裹title、meta等标签，支持绑定与自动清理。

Blazor 中动态修改 `` 内容（如 title、meta、link、style 等）主要靠 Microsoft.AspNetCore.Components.Web.Extensions 提供的 HeadOutlet 组件配合 HeadContent 实现。.NET 6+ 已内置支持，无需额外 NuGet 包（旧版本需手动安装）。

启用 HeadOutlet（必须第一步）

在根布局文件（通常是 App.razor 或 _Host.cshtml 对应的布局）中，确保已添加 ：

    
        
        
    
    
        Not found
        
            
Sorry, there's nothing at this address.
        
    

 

在组件中动态写入 HeadContent

在任意 Razor 组件（.razor）中使用 块，其中内容会自动注入到页面 `` 中：

• 支持 HTML 标签：

  @code { [Parameter] public string Id { get; set; } private string articleTitle = "Loading..."; private string articleDescription = "";

  protected override void OnInitialized()
  {
      // 模拟加载文章数据
      articleTitle = $"Article #{Id}";
      articleDescription = $"This is the description for article {Id}.";
  }

  }

  注意点和常见问题

  • 必须在组件的顶级作用域（不能嵌套在 @if、@foreach 或自定义组件内），否则编译报错
  • 若需条件渲染，用 C# 逻辑拼接字符串再输出（不推荐），更稳妥的是用多个 配合 @if 包裹整个块
  • SEO 友好：服务端渲染（SSR）或静态生成（SSG）模式下，这些 head 内容会真实出现在初始 HTML 中
  • JS 注入限制：动态插入的