Question

由于Blazor是SPA框架，我想知道是否可以为Blazor中的每个页面设置页面标题吗？

我目前正在Blazor Webassembly项目上工作，无法找到一种添加页面标题的方法，因为在SPA中只有一个index.html，但是如果可以实现设置，它将非常有用每个“页面”的标题。

Answer 1

在ASP.NET CORE 5.0中，添加了标题的新组件

 <Title value="Page title" />

Msdn参考：https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/additional-scenarios?view=aspnetcore-5.0#influence-html-head-tag-elements

首先在组件中添加using语句

@using Microsoft.AspNetCore.Components.Web.Extensions.Head

您可以使用以下命令安装（如果未安装）。

dotnet add package Microsoft.AspNetCore.Components.Web.Extensions --version 5.0.0-preview9.20467.1

5.0.0-preview9.20467.1是我撰写本文时的版本。请检查nuget网址以获取最新版本

Nuget网址：https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Web.Extensions/

然后添加标题标签。

<Title Value="My page title" />

请参见下面的示例输出图像

Answer 2

1）在index.html（或包含的.js文件）中提供以下脚本：

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

2）在每个页面中注入jsinterop：

@inject IJSRuntime JSRuntime;

3）每次渲染后，将文档标题设置为您选择的值：

@code
{
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
       await JSRuntime.InvokeVoidAsync("setTitle", "this is the new title"); ;        
    }

}

Answer 3

在ASP.NET CORE 5.0中，official docs说，我们可以使用<head>组件轻松影响HTML Title标签元素。

@using Microsoft.AspNetCore.Components.Web.Extensions.Head

<Title Value="{TITLE}" />

更新1：

看起来该API已被搁置以进一步改进。这已从官方文档链接中删除。这是github issue跟踪的内容。 API最终在文档中可用后，我将更新答案。

Answer 4

对此post表示敬意，您可以制作可重复使用的组件。

将以下脚本添加到js文件，或添加到 index.html

<!DOCTYPE html>
<html>

<head>
...
</head>

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

</html>

在共享文件夹中创建一个新组件 PageTitle.razor

@inject IJSRuntime JsRuntime;

@code {
    [Parameter]
    public string Title { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await SetTitle();
    }

    private async Task SetTitle()
    {
        await JsRuntime.InvokeVoidAsync("setTitle", Title);
    }
}

添加到要更改其名称的剃须刀页面：