如何在iframe中渲染Blazor组件？跨项目组件引用问题求解

可以用iframe渲染Blazor组件，但你直接指定.razor文件路径的做法不对，这就是iframe空白的原因。

正确操作步骤 #

• 首先在存放Component.razor的项目里，新建一个专门承载该组件的页面，比如ComponentHost.razor，内容如下：

  @page "/component-host"
  <!-- 直接引用你的目标组件 -->
  <Component />
  

• 启动这个项目，确认能通过http://localhost:1234/component-host访问到正常渲染的组件页面。
• 回到主项目，把iframe的src改成这个完整的页面URL：

  <iframe src="http://localhost:1234/component-host" width="100%" height="auto"></iframe>
  

为什么直接用.razor文件不行？ #

.razor是Blazor的源文件，里面混合了C#和HTML语法，浏览器根本没法直接解析。必须经过Blazor框架编译、处理，生成浏览器能识别的Web资源（比如WebAssembly的wasm文件、Server端的SignalR连接）后，才能正常显示。直接访问.razor文件只会拿到原始代码文本，自然是空白。

额外的替代方案（不用iframe的话） #

如果不想用iframe，推荐把目标组件打包成Razor类库（RCL），主项目需要时就引用这个类库，不需要时直接移除引用，这样就不会有引用报错的问题。要是用的Blazor WebAssembly，还可以搞延迟加载组件/程序集，需要的时候动态加载，不需要就不加载对应的程序集，体验比iframe更流畅。

内容的提问来源于stack exchange，提问作者Chandan Ankush Gauns