diff --git a/src/BootstrapBlazor/Components/HtmlTag/Link.razor b/src/BootstrapBlazor/Components/HtmlTag/Link.razor index 2ad08e9304c..31767a7d3fb 100644 --- a/src/BootstrapBlazor/Components/HtmlTag/Link.razor +++ b/src/BootstrapBlazor/Components/HtmlTag/Link.razor @@ -1,4 +1,7 @@ -@namespace BootstrapBlazor.Components -@inherits BootstrapComponentBase - - +@namespace BootstrapBlazor.Components +@inherits BootstrapModuleComponentBase +@attribute [BootstrapModuleAutoLoader(JSObjectReference = false, AutoInvokeInit = false, AutoInvokeDispose = false)] +@if (!AddToHead) +{ + +} diff --git a/src/BootstrapBlazor/Components/HtmlTag/Link.razor.cs b/src/BootstrapBlazor/Components/HtmlTag/Link.razor.cs index 5e2cea36217..55e8ba32a3e 100644 --- a/src/BootstrapBlazor/Components/HtmlTag/Link.razor.cs +++ b/src/BootstrapBlazor/Components/HtmlTag/Link.razor.cs @@ -1,4 +1,4 @@ -// Licensed to the .NET Foundation under one or more agreements. +// Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the Apache 2.0 License // See the LICENSE file in the project root for more information. // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone @@ -29,8 +29,29 @@ public partial class Link [Parameter] public string? Version { get; set; } + /// + /// 是否将样式添加到 head 元素内。 + /// 同时在多个组件中使用同一个样式时可以添加到 head 中,减少 DOM 节点。 + /// + [Parameter] + public bool AddToHead { get; set; } = false; + [Inject, NotNull] private IVersionService? VersionService { get; set; } private string GetHref() => $"{Href}?v={Version ?? VersionService.GetVersion(Href)}"; + + /// + /// + /// + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + if (AddToHead && firstRender) + { + var obj = new { Href = GetHref(), Rel }; + await InvokeVoidAsync("init", obj); + } + } } diff --git a/src/BootstrapBlazor/Components/HtmlTag/Link.razor.js b/src/BootstrapBlazor/Components/HtmlTag/Link.razor.js new file mode 100644 index 00000000000..9e81df88d2e --- /dev/null +++ b/src/BootstrapBlazor/Components/HtmlTag/Link.razor.js @@ -0,0 +1,16 @@ +export function init(options) { + const { href, rel } = options; + const nhref = new URL(href, document.baseURI); + const links = document.head.getElementsByTagName("link"); + // 遍历所有link元素 + for (let i = 0; i < links.length; i++) { + const hlink = links[i]; + if (hlink.href == nhref && hlink.rel == rel) { + return; + } + } + const link = document.createElement('link'); + link.rel = rel; + link.href = href; + document.head.appendChild(link); +} diff --git a/test/UnitTest/Components/LinkTest.cs b/test/UnitTest/Components/LinkTest.cs index 3f42a2f9ff6..a91036f63d0 100644 --- a/test/UnitTest/Components/LinkTest.cs +++ b/test/UnitTest/Components/LinkTest.cs @@ -1,4 +1,4 @@ -// Licensed to the .NET Foundation under one or more agreements. +// Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the Apache 2.0 License // See the LICENSE file in the project root for more information. // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone @@ -29,4 +29,16 @@ public void Link_Version() }); Assert.Equal($"", cut.Markup); } + + [Fact] + public void Link_IsAddToHead_True() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.Href, "http://www.blazor.zone"); + pb.Add(a => a.Version, "20220202"); + pb.Add(a => a.AddToHead, true); + }); + Assert.Equal(string.Empty, cut.Markup); + } }