Angular 项目中的 Blazor webassembly

Posted 2023-03-27

【中文标题】Angular 项目中的 Blazor webassembly

【英文标题】：Blazor webassembly in Angular project

【发布时间】：2020-09-20 15:39:58

【问题描述】：

我有一个 Blazor webassembly Web 应用程序，我想将它添加到一个 Angular 项目中。我已经研究了解决方案，但我没有找到任何可以帮助我的东西。有没有人知道如何将 Angular en Blazor 结合在一起？

【问题讨论】：

只是想知道，为什么需要将 Blazor WASM 添加到 Angular 项目中？

因为我在一个组件中有一个 .Net 方法。我想将此组件添加到我的 Angular 应用程序到我现有的 Angular 应用程序中

我认为不可能在核心 Angular 应用程序中使用 Blazor 组件。然而，独立的 Angular 元素 Web 组件可以使用 javascript 互操作功能在 Blazor WASM 应用程序中使用。

你有没有得到这个工作？我认为它的概念对于许多拥有现有 Angular 应用程序的人来说很有价值

也许您应该将 .Net 方法放入您从 Angular 项目调用的休息服务器中

【参考方案1】：

诀窍是通过调用 JSComponentConfigurationExtensions.RegisterForJavaScript 使 Blazor 组件可用于从 JavaScript 进行实例化，这可从 ASP.NET Core 6.0 开始使用。

弥合从 Blazor 组件到 Angular 组件的差距需要一些进一步的步骤。来自 ASP.NET 示例的 JavaScript Component Generation 示例显示了它们，但是由于一些未解决的问题，在撰写本文时提供的代码无法编译。

基于此代码，我创建了一个演示项目，其中包括成功构建的所有这些步骤。有关代码和说明，请参阅我的 BlazorInAngularDemo github project 以及 working demo。

【参考方案2】：

为什么不呢？继续吧，但要为大量的手工工作做好准备。

在this 手册的第一部分掠夺。它向您展示了如何使用 Blazor.Start javascript 函数将您的 WASM 引导到 html 文件中。你可以只取所有构建的资源，将它们转移到你的 Angular 项目并运行Blazor.Start。

您应该能够使用 JS 互操作与您的 Angular 应用程序对话。