时间戳

首页 > 解决方案 > Blazor 组件（在库中）和 JSInterop

components - Blazor 组件（在库中）和 JSInterop

问题描述

我在一个完整的 Blazor 项目中创建了一个 Blazor 组件，并且一切正常。但是，当我将此组件移动到它自己的 Razor 类库项目时，我现在收到一个错误，即在与服务器建立连接之前我无法使用 JSInterop。我在 OnAfterRenderAsync() 方法中运行我的代码。

进行更改时，我不得不稍微更改代码。在完整的 Blazor 项目中，在 Startup 类中通过 DI 为您提供了 JSInterop。但是对于 calss 库，情况并非如此。

因此，我不得不像这样设置它，而不是页面中的“@inject JSInterop js” -

  private IJSRuntime js { get; set; }

  protected override void OnInitialized()
  {
    js = ScopedServices.GetRequiredService<IJSRuntime>();
  }

从网络上提供的粗略细节来看，我假设这从父项目获取服务。

使用调试，我可以看到 js 不为空。它似乎已设置为有效对象。

谁能指出我正确的方向？

标签： componentsblazorblazor-jsinterop

解决方案

找到了我的问题的解决方案，它使我最初的问题变得无关紧要。当我将我的组件复制到它自己的类库项目中时，它不会编译。它在@inject JSInterop js 行上给了我一个错误。

这让我相信它不知道如何注入它，因为它不是在项目启动期间设置的，就像在 Blazor 应用程序中一样。所以我拼凑代码以通过 ScopedServices.GetRequiredService() 获取参考。这确实创建了一个对象，但没有设置包含与服务器的连接的 _clientProxy。

因此，我设法在BlazorHelp 网站上找到了一个完整的组件库示例项目， 这确实在 Blazor 文件中注入了 JSInterop。所以我将我的代码恢复为在整个项目中工作的原始代码并尝试编译。它给了我同样的错误。所以我删除了@inject JSInterop js 行并再次输入。它认出了它！！！它仍然无法编译，无法识别自定义类型（Pivot）并询问我是否包含对它的引用。

[CascadingParameter] public Pivot OwnerPivot { get; set; }

我删除了 Pivot 这个词并重新输入了它，瞧，它编译了。

所以看起来VS2019或剃刀编译器中存在某种错误，删除源文件中的代码并重新输入导致它识别和编译。

推荐阅读