如何在Angular或React应用中嵌入客户端Blazor组件并实现交互调用

Blazor WASM和Angular都是运行在浏览器端的前端框架，二者完全可以共存于同一个单页应用中，你需要的「嵌入组件+Angular侧触发Blazor功能」的需求，通过微前端挂载的方式即可实现，不需要大幅改动现有Angular项目的核心逻辑。

具体操作步骤 #

• 调整Blazor项目配置
  首先修改Blazor项目的启动逻辑，关闭默认的自动挂载DOM功能，改为暴露手动挂载、卸载的全局方法，同时指定Blazor专属的挂载节点，避免和Angular的DOM节点产生冲突。如果是嵌入游戏的场景，你可以额外在Blazor侧暴露一个全局的启动游戏方法，内部封装游戏的初始化逻辑。
  打包Blazor项目时调整静态资源的输出路径，确保打包后的资源可以被Angular项目正常引用。
• 导入Blazor资源到Angular项目
  将Blazor打包后的所有静态资源（包括_framework文件夹、样式、静态资源文件）复制到Angular项目的assets目录下，在Angular的入口index.html中引入Blazor的启动脚本blazor.webassembly.js，注意给脚本添加autostart="false"属性，阻止Blazor自动初始化。
• 预留Blazor挂载容器
  在Angular中需要展示Blazor组件的页面模板里，添加一个专属的空DOM节点，比如<div id="blazor-game-container"></div>，默认可以给这个节点设置display: none隐藏，避免占用页面空间。
• 实现Angular按钮触发Blazor功能的逻辑
  首先在Angular对应页面的初始化生命周期中，调用window.Blazor.start()完成Blazor运行时的初始化，你可以提前触发这个逻辑做预加载，减少用户点击按钮后的等待时间。
  给你的Angular启动按钮绑定点击事件，事件逻辑依次执行两步操作：第一，将#blazor-game-container的显示状态改为可见；第二，直接调用你之前在Blazor侧暴露的全局游戏启动方法，即可完成游戏的启动。

常见问题规避 #

• 两个框架的路由规则如果有冲突，记得把Blazor相关的资源路径添加到Angular路由的白名单中，避免Blazor资源被Angular路由拦截导致加载失败。
• 如果需要Blazor侧回传数据给Angular，也可以通过在window对象上挂载回调方法的方式实现，逻辑和Angular调用Blazor完全一致。
• 首次加载Blazor运行时会有几十毫秒到几百毫秒的加载耗时，可以在Angular侧加一个简单的加载提示，优化用户体验。

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