4

我还很陌生Razor Components，我想更改titleHTML 文档中的和其他数据 -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>

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

希望你们能帮助我。谢谢阅读。:)

4

2 回答 2

0

我发现了一个非常简单的 NuGet：Toolbelt.Blazor.HeadElement

启动.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>

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

于 2020-05-05T04:32:36.467 回答
-1

这是honkmother（https://github.com/honkmother）是如何做到的。这是链接： https ://github.com/aspnet/Blazor/issues/842#issuecomment-490671409

Index.cshtml：

@page "{*clientPath}"

<!DOCTYPE html>
<html>

@(await Html.RenderComponentAsync<html>())

</html>

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

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;
}

一个“身体”组件。

<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());
    }

}
于 2019-08-01T12:16:05.627 回答