Question

我对Razor Components还是陌生的，因此我想根据用户访问的页面来更改title和HTML文档-head中的其他数据（例如，如果用户访问产品X的产品页面，我想相应地更改title中的head和其他相关数据）。我已经看过https://github.com/aspnet/Blazor/issues/1311#issuecomment-470760857，但提出的解决方案看起来有些古怪。我还知道，从理论上讲，我可以使用JavaScript interop来实现自己的目标，但这似乎有些混乱。

我试图这样渲染应用程序：

@page "{*clientPath}"

<!DOCTYPE html>
<html>
    @(await Html.RenderComponentAsync<App>())
</html>

但是由于components.server.js（Uncaught Error: There is no browser renderer with ID 0.）中的错误，尝试失败。我知道我不应该将JavaScript标记放入组件中，但是我想尝试一下。

希望你们能帮助我。谢谢阅读。：）

Answer 1

我发现一个NuGet使其非常简单： Toolbelt.Blazor.HeadElement

Startup.cs

using Toolbelt.Blazor.Extensions.DependencyInjection;

 public void ConfigureServices(IServiceCollection services)
    {
        services.AddHeadElementHelper();

然后您要做的就是将组件添加到页面中：

@page "/customers"

<Toolbelt.Blazor.HeadElement.Title>
    Customers
</Toolbelt.Blazor.HeadElement.Title>
<h1>Customers</h1>

结果将是

<title>customers<title>

在您的头部。该插件还具有用于元标记和链接的组件。

Answer 2

这是honkmother（https://github.com/honkmother）的工作方式。链接在这里： https://github.com/aspnet/Blazor/issues/842#issuecomment-490671409

Index.cshtml：

public class html : ComponentBase
{
    public static string HeadTXT = File.ReadAllText("head.htm");
    Metatags meta = new Metatags() { Title = "some title" };
    protected override void BuildRenderTree(Microsoft.AspNetCore.Components.RenderTree.RenderTreeBuilder builder)
    {

        builder.OpenElement(0, "head");
        builder.AddMarkupContent(1, HeadTXT);
        builder.OpenComponent<Head>(2);
        builder.AddAttribute(3, "MetaInfo", meta);
        builder.CloseComponent();
        builder.CloseElement();

        builder.OpenElement(4, "body");
        builder.OpenComponent<Body>(5);
        builder.AddAttribute(6, "MetaInfo", meta);
        builder.CloseComponent();
        builder.AddMarkupContent(7, "<script src=\"_framework/components.server.js\"></script>");
        builder.CloseElement();

    }
}

public class Metatags
{
    public string Title { get; set; } = "example.nyc — weirdest hack ever";
    public string Description { get; set; } = "testing";
    public Head Component;
}

然后，两个类称为“ html”和“ metatags”。 html类创建html标签，并将标头（脚本标签等）存储在作为标记注入的html文件中。

<DetectPrerender MetaInfo="@MetaInfo">
    <Router AppAssembly="typeof(Startup).Assembly" />
</DetectPrerender>


@functions {

    [Parameter]
    private Metatags MetaInfo { get; set; }

}

“身体”组件。

@using example.Shared

<title>@MetaInfo.Title</title>
<meta name="description" content="@MetaInfo.Description">
@{
    MetaInfo.Component = this;
}
@functions {

    [Parameter]
    private Metatags MetaInfo { get; set; }
    private bool ShouldRend = false;
    protected override bool ShouldRender()
    {
        if (ShouldRend)
        {
            ShouldRend = false;
            return true;
        }
        return false;
    }

    public void ShouldRe()
    {
        ShouldRend = true;
        base.Invoke(() => base.StateHasChanged());
    }

}

还有一个“头部”组件。

68.67 KB  build\static\js\2.c2c334ae.chunk.js
  2.98 KB   build\static\js\main.8a72b1a2.chunk.js
  774 B     build\static\js\runtime~main.8f8a00a4.js

如何在Razor组件中的HTML文档的标题中更改标题和其他html元素？

2 个答案: