Как изменить заголовок и другие html-элементы в заголовке HTML-документа в Razor Components?

Я довольно новичок в Razor Components и я хотел бы изменить title и другие данные внутри HTML-документаhead в зависимости от того, какую страницу посещает пользователь (например, если пользователь заходит на страницу продукта продукта X, я хочу изменить title и другие соответствующие данные в head соответственно). Я уже заглянул на https://github.com/aspnet/Blazor/issues/1311, но представленные решения выглядят немного странно. Я также знаю, что я мог бы теоретически использовать 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-теги в компоненты, но я решил попробовать.

Надеюсь, вы, ребята, можете мне помочь. Спасибо за прочтение.:)

Источник

0 ответов

Я нашел 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>

в вашем разделе головы. Этот плагин также имеет компоненты для метатегов и ссылок.

Источник

Вот как это сделал honkmother ( https://github.com/honkmother). Вот ссылка: https://github.com/aspnet/Blazor/issues/842

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

}
Источник
Другие вопросы по тегам