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 标签：
、、、（仅静态注入，不执行 JS） - 内容可绑定参数或状态，实现“动态”效果
- 组件卸载时，对应内容会自动移除，避免重复或残留
示例：根据路由参数设置页面标题和描述
@page "/article/{Id}"
@inject NavigationMa
nager Nav
@articleTitle
@articleContent
@articleTitle - My Blog
@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}.";
}}
nager Nav
注意点和常见问题
-
@if、@foreach或自定义组件内），否则编译报错 - 若需条件渲染，用 C# 逻辑拼接字符串再输出（不推荐），更稳妥的是用多个
@if包裹整个块 - SEO 友好：服务端渲染（SSR）或静态生成（SSG）模式下，这些 head 内容会真实出现在初始 HTML 中
- JS 注入限制：动态插入的
标签不会自动执行（出于安全），如需运行脚本，请用IJSRuntime手动调用
替代方案（轻量场景）
如果只改标题，可用 NavigationManager + PageTitle 组件（.NET 7+ 更简洁）：
@pageTitle @code { private string pageTitle = "Home"; }
它本质是 HeadContent 的语法糖，适合简单 title 场景。
基本上就这些。核心就是 HeadOutlet + HeadContent，结构清晰、无副作用、天然支持组件生命周期。
