添加 IsAddToHead 参数，支持将 link 标签添加到 head 元素中。

#7091

Author: AiYuZhen

src/BootstrapBlazor/Components/HtmlTag/Link.razor

@@ -1,4 +1,7 @@
-@namespace BootstrapBlazor.Components
-@inherits BootstrapComponentBase
-
-<link @attributes="AdditionalAttributes" href="@GetHref()" rel="@Rel" />
+@namespace BootstrapBlazor.Components
+@inherits BootstrapModuleComponentBase
+@attribute [BootstrapModuleAutoLoader(JSObjectReference = false, AutoInvokeInit = false, AutoInvokeDispose = false)]
+@if (!IsAddToHead)
+{
+    <link @attributes="AdditionalAttributes" href="@GetHref()" rel="@Rel" />
+}

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([email protected]) Website: https://www.blazor.zone
@@ -29,8 +29,29 @@ public partial class Link
     [Parameter]
     public string? Version { get; set; }
 
+    /// <summary>
+    /// 是否将样式添加到 head 元素内。
+    /// <para>同时在多个组件中使用同一个样式时可以添加到 head 中，减少 DOM 节点。</para>
+    /// </summary>
+    [Parameter]
+    public bool IsAddToHead { get; set; } = false;
+
     [Inject, NotNull]
     private IVersionService? VersionService { get; set; }
 
     private string GetHref() => $"{Href}?v={Version ?? VersionService.GetVersion(Href)}";
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+        if (IsAddToHead && firstRender)
+        {
+            var obj = new { Href = GetHref(), Rel };
+            await InvokeVoidAsync("init", obj);
+        }
+    }
 }

src/BootstrapBlazor/Components/HtmlTag/Link.razor.js

@@ -0,0 +1,17 @@
+export function init(options) {
+    const href = options.href;
+    const rel = options.rel;
+    const links = document.head.getElementsByTagName("link");
+    // 遍历所有link元素
+    for (let i = 0; i < links.length; i++) {
+        const hlink = links[i];
+        var nhref = hlink.baseURI + href;
+        if (hlink.href == nhref && hlink.rel == rel) {
+            return;
+        }
+    }
+    const link = document.createElement('link');
+    link.rel = rel;
+    link.href = href;
+    document.head.appendChild(link);
+}

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([email protected]) Website: https://www.blazor.zone
@@ -29,4 +29,16 @@ public void Link_Version()
         });
         Assert.Equal($"<link href=\"http://www.blazor.zone?v=20220202\" rel=\"stylesheet\" />", cut.Markup);
     }
+
+    [Fact]
+    public void Link_IsAddToHead_True()
+    {
+        var cut = Context.RenderComponent<Link>(pb =>
+        {
+            pb.Add(a => a.Href, "http://www.blazor.zone");
+            pb.Add(a => a.Version, "20220202");
+            pb.Add(a => a.IsAddToHead, true);
+        });
+        Assert.Equal(string.Empty, cut.Markup);
+    }
 }