Blazor应用中如何配置页面标题为「应用名称 | 页面名称」格式

以下是两种实用的实现方案，直接解决原生<title>组件无法自定义格式的问题：

方案一：封装自定义Title组件 #

直接创建一个可复用的组件，统一管理标题格式：

1. 创建共享组件 CustomTitle.razor：

@inject NavigationManager NavigationManager
@implements IDisposable

@code {
    [Parameter]
    public string PageTitle { get; set; } = string.Empty;

    // 替换成你的实际应用名称，也可以从配置读取
    private readonly string _appName = "我的Blazor应用";

    protected override void OnInitialized()
    {
        UpdateFullTitle();
        NavigationManager.NavigationChanged += OnNavigationChanged;
    }

    private void UpdateFullTitle()
    {
        var fullTitle = string.IsNullOrEmpty(PageTitle) 
            ? _appName 
            : $"{_appName} | {PageTitle}";
        DocumentTitle.SetTitle(fullTitle);
    }

    private void OnNavigationChanged(object? sender, EventArgs e)
    {
        UpdateFullTitle();
    }

    public void Dispose()
    {
        NavigationManager.NavigationChanged -= OnNavigationChanged;
    }
}

2. 在各页面中使用：
   比如在Index.razor首页：

<CustomTitle PageTitle="首页" />

<h1>欢迎访问首页</h1>

在ProductList.razor产品列表页：

<CustomTitle PageTitle="产品列表" />

<h1>全部产品</h1>

方案二：全局服务+布局监听 #

适合需要动态更新标题（比如带路由参数的详情页）的场景：

1. 创建页面标题服务 PageTitleService.cs：

public class PageTitleService
{
    public string AppName { get; set; } = "我的Blazor应用";
    public event Action<string>? TitleUpdated;

    private string _currentPageTitle = string.Empty;
    public string CurrentPageTitle
    {
        get => _currentPageTitle;
        set
        {
            _currentPageTitle = value;
            TitleUpdated?.Invoke(GetFullTitle());
        }
    }

    public string GetFullTitle()
    {
        return string.IsNullOrEmpty(CurrentPageTitle) 
            ? AppName 
            : $"{AppName} | {CurrentPageTitle}";
    }
}

2. 在Program.cs注册服务：

builder.Services.AddScoped<PageTitleService>();

3. 在主布局MainLayout.razor中监听标题变化：

@inject PageTitleService TitleService
@inject IJSRuntime JSRuntime
@implements IDisposable

@code {
    protected override async Task OnInitializedAsync()
    {
        TitleService.TitleUpdated += async (fullTitle) =>
        {
            await JSRuntime.InvokeVoidAsync("updateDocumentTitle", fullTitle);
        };
        // 初始化默认标题
        await JSRuntime.InvokeVoidAsync("updateDocumentTitle", TitleService.GetFullTitle());
    }

    public void Dispose()
    {
        TitleService.TitleUpdated -= async (fullTitle) =>
        {
            await JSRuntime.InvokeVoidAsync("updateDocumentTitle", fullTitle);
        };
    }
}

4. 在_Host.cshtml（Server模式）或index.html（Wasm模式）添加辅助脚本：

<script>
    window.updateDocumentTitle = (title) => {
        document.title = title;
    };
</script>

5. 在页面中设置动态标题：
   比如带参数的产品详情页ProductDetail.razor：

@page "/product/{ProductId:int}"
@inject PageTitleService TitleService

@code {
    [Parameter]
    public int ProductId { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        // 模拟从API获取产品名称
        var productName = await GetProductName(ProductId);
        TitleService.CurrentPageTitle = $"产品详情：{productName}";
    }

    private async Task<string> GetProductName(int id)
    {
        // 替换为实际业务逻辑
        return $"XX手机{id}";
    }
}

额外优化建议 #

• 可以把应用名称放到appsettings.json中，通过IConfiguration读取，方便后续修改：

{
  "AppSettings": {
    "AppName": "我的Blazor应用"
  }
}

然后在服务或组件中注入IConfiguration读取：

private readonly string _appName;
public PageTitleService(IConfiguration config)
{
    _appName = config["AppSettings:AppName"] ?? "Blazor应用";
}

内容的提问来源于stack exchange，提问作者jmiller