如何在另一个JS应用程序中导入blazor自定义元素？

问题描述 投票：0回答：2

我有一个 blazor 服务器应用程序，其注册的自定义元素如下代码：

builder.Services.AddServerSideBlazor(options =>
{
    options.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");
});

我想在另一个 

node.js
应用程序中导入此 blazor 自定义元素，以将其转换为点亮元素（Web 组件）。 我在我的 Node.js 应用程序中添加了以下脚本

<script src="https://localhost:7075/_framework/blazor.server.js"></script>
<script src="https://localhost:7075/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>

但是在初始化 Blazor 时，它仍然使用节点应用程序端口，并且在初始化时失败。 我不确定我在这里遗漏了什么，或者是否有其他方法可以做到这一点。

javascript blazor blazor-server-side custom-element
2个回答
2
投票

下面描述了我如何解决与您类似的问题：尝试注册自定义元素，客户端不渲染组件并且在任何地方都没有错误消息。

我按照说明进行操作，但客户端没有发生任何事情。使用 Firefox 检查 Websocket 的流量后，我遇到了从客户端到服务器的以下消息（为便于阅读而稍加编辑）：

ù•€ÀµEndInvokeJSFromDotNet“ÂÚÙ[
    2,
    false,
    "Could not find 'registerBlazorCustomElement' ('registerBlazorCustomElement' was undefined).
    findFunction/<@https://localhost:5001/_framework/blazor.server.js:1:497
    findFunction@https://localhost:5001/_framework/blazor.server.js:1:465
    E@https://localhost:5001/_framework/blazor.server.js:1:2606
    attachWebRendererInterop/<@https://localhost:5001/_framework/blazor.server.js:1:33097
    attachWebRendererInterop@https://localhost:5001/_framework/blazor.server.js:1:33145
    beginInvokeJSFromDotNet/s<@https://localhost:5001/_framework/blazor.server.js:1:3501
    beginInvokeJSFromDotNet@https://localhost:5001/_framework/blazor.server.js:1:3475
    _invokeClientMethod/<@https://localhost:5001/_framework/blazor.server.js:1:71894
    _invokeClientMethod@https://localhost:5001/_framework/blazor.server.js:1:71880
    _processIncomingData@https://localhost:5001/_framework/blazor.server.js:1:69922
    kt/this.connection.onreceive@https://localhost:5001/_framework/blazor.server.js:1:64322
    connect/</o.onmessage@https://localhost:5001/_framework/blazor.server.js:1:48638
    EventHandlerNonNull*connect/<@https://localhost:5001/_framework/blazor.server.js:1:48489
    connect@https://localhost:5001/_framework/blazor.server.js:1:48005
    _startTransport@https://localhost:5001/_framework/blazor.server.js:1:57626
    _createTransport@https://localhost:5001/_framework/blazor.server.js:1:56195
    _startInternal@https://localhost:5001/_framework/blazor.server.js:1:54044
    async*start@https://localhost:5001/_framework/blazor.server.js:1:51309
    _startInternal@https://localhost:5001/_framework/blazor.server.js:1:66198
    _startWithStateTransitions@https://localhost:5001/_framework/blazor.server.js:1:65598
    start@https://localhost:5001/_framework/blazor.server.js:1:65262
    Gn@https://localhost:5001/_framework/blazor.server.js:1:129904
    Yn@https://localhost:5001/_framework/blazor.server.js:1:127771
    async*@https://localhost:5001/_framework/blazor.server.js:1:131523
    @https://localhost:5001/_framework/blazor.server.js:1:131529
    "
]

就我而言，我没有将 

<script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
添加到 html 中。

.NET 8/9 更新

不再需要手动添加 

<script />
，而在 .NET 8 中，它应该通过 
_blazor/initializers
端点自动处理此问题。然而，在 .NET 9 中SDK 中出现了一个错误，该错误将在 .NET 10 中修复。

1
投票

我正在努力让它适用于 Blazor 服务器端应用程序。我在 blazor 项目的 wwwroot 中创建了一个 test.html 页面。

我的解决方法是指定基本网址。

我的 html 看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- my component is here -->
    <blazor-counter></blazor-counter>
    <base href="http://localhost:5144">
</head>
<body>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.