如何从包装在JSLibrary Nuget包中的C#元素访问自定义元素- Blazor .NET

Question

我已经将模型查看器JS库封装在一个C# Razor类库中，并将其作为Nuget包。然而，与其他JS库不同的是，Model-Viewer没有很多方法，它的主要属性是自定义元素model-viewer及其属性。在用C#包装库之后，我应该如何访问这个元素，有什么想法吗？

ModelViewerService.cs：

public class ModelViewerService
{
    private static Task<IJSObjectReference> s_module = null;

    private readonly IJSRuntime js;

    public ModelViewer(JSRuntime js)
    {
        Assembly asm;
        JS = js;

        if(s_module == null)
        {
            asm = Assembly.GetExecutingAssembly();
            s_module = JS.InvokeAsync<IJSObjectReference>("import", "./_content/ModelViewerPackage/scripts/model-viewer/model-viewer.min.js?version=" + asm.ManifestModule.ModuleVersionId).AsTask();
        }
    }
}

在我的Index.blazor页面中，当我直接通过

<script src="model=viewer.min.js" type="module"></script>

我只是通过调用：

<model-viewer src="mymodel.glb"></model-viewer>

我会用同样的语法使用这个库吗？还是我需要对我的包做任何抽象？

Answer 1

好吧，我想通了。我需要创建一个ModelViewerService对象，传递一个注入的JSRuntime对象，这个库将从我的包中导入到我的Blazor中。

在Index.blazor.cs中

[Inject]
private JSRuntime js;

protected override async Task OnInitializedAsync()
{
     this.StateHasChanged()
     await base.OnInitializedAsync();

     ModelViewerService modelViewer = new(js); // This will do the trick.
}