如何实现Blazor Razor类库无需显式引用自动注入CSS/JS至主项目？

这个问题问得很到位！很多刚接触Blazor库开发的同学都会好奇这点，像Toolbelt.Blazor.LoadingBar、DevExpress.Blazor这类库，只需要调用services.AddMyLibrary()就能自动搞定CSS/JS注入，核心是组合利用了Blazor的几个关键特性，我来拆解具体实现步骤：

1. 把CSS/JS打包为内嵌资源 #

首先，库作者会将需要注入的CSS和JS文件标记为内嵌资源，这样这些文件会被直接打包进库的DLL中，不需要用户手动复制文件到主项目。在库的csproj文件里会有类似配置：

<ItemGroup>
  <EmbeddedResource Include="wwwroot/css/loading-bar.css" />
  <EmbeddedResource Include="wwwroot/js/loading-bar.js" />
</ItemGroup>

2. 动态注入资源的两种核心方式 #

接下来，库会通过以下两种常见方式，自动将内嵌资源注入到主项目的页面中：

方式一：通过全局组件动态加载资源 #

库会定义一个专门的注入器组件（比如LoadingBarResourceInjector），这个组件会在初始化时，通过Blazor的JS互操作（JS Interop）把内嵌的CSS/JS动态插入到页面里。

举个简化的组件示例：

@inject IJSRuntime JSRuntime
@code {
    protected override async Task OnInitializedAsync()
    {
        // 读取内嵌的JS资源并执行
        var jsResourceName = "Toolbelt.Blazor.LoadingBar.wwwroot.js.loading-bar.js";
        using var jsStream = typeof(LoadingBarResourceInjector).Assembly.GetManifestResourceStream(jsResourceName);
        if (jsStream != null)
        {
            var jsCode = await new StreamReader(jsStream).ReadToEndAsync();
            await JSRuntime.InvokeVoidAsync("eval", jsCode);
        }

        // 读取内嵌的CSS资源并插入到<head>
        var cssResourceName = "Toolbelt.Blazor.LoadingBar.wwwroot.css.loading-bar.css";
        using var cssStream = typeof(LoadingBarResourceInjector).Assembly.GetManifestResourceStream(cssResourceName);
        if (cssStream != null)
        {
            var cssCode = await new StreamReader(cssStream).ReadToEndAsync();
            await JSRuntime.InvokeVoidAsync("window.injectCss", cssCode);
        }
    }
}

对应的辅助JS函数（可以内嵌在组件里或者另一个内嵌JS文件）：

window.injectCss = function(cssText) {
    const styleEl = document.createElement('style');
    styleEl.textContent = cssText;
    document.head.appendChild(styleEl);
};

然后，在库的服务扩展方法（AddLoadingBar()）里，会把这个组件注册为全局组件，让Blazor在应用启动时自动渲染它，从而触发资源注入逻辑。

方式二：利用IHostingStartup实现启动时注入 #

另一种方式是实现Blazor的IHostingStartup接口，这个接口允许库在应用启动阶段执行自定义逻辑，包括注册服务、添加全局组件等。

示例代码：

public class LoadingBarHostingStartup : IHostingStartup
{
    public void Configure(IWebHostBuilder builder)
    {
        builder.ConfigureServices(services =>
        {
            // 注册注入器组件
            services.AddScoped<LoadingBarResourceInjector>();
            // 将组件所在程序集添加到Blazor的组件搜索范围
            services.AddRazorComponents()
                .AddAdditionalAssemblies(typeof(LoadingBarResourceInjector).Assembly);
        });
    }
}

然后在库的csproj里添加配置，让Blazor自动识别这个启动类：

<ItemGroup>
  <HostingStartupAssembly Include="Toolbelt.Blazor.LoadingBar" />
</ItemGroup>

3. 封装友好的扩展方法 #

最后，库会把这些复杂的注册逻辑封装成一个简单的扩展方法（比如services.AddLoadingBar()），用户只需要在Program.cs里调用这个方法，就能自动触发所有资源注入的逻辑，完全不需要手动添加<link>或<script>标签。

简单来说，这类库的核心就是把资源内嵌到DLL，再通过Blazor的启动钩子或全局组件动态注入到页面，从而实现“一键集成”的效果。

内容的提问来源于stack exchange，提问作者Leonardo Lurci