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