时间戳

首页 > 解决方案 > Blazor - Razor 类库 - 重用完整的 Blazor 页面

blazor - Blazor - Razor 类库 - 重用完整的 Blazor 页面

问题描述

我这里有问题

我用核心 3.1 创建了一个 Blazor 应用程序（服务器端），然后我用这个类库创建了一个 Razor 类库（旧 razorlib）我可以创建 blazor comp 并在我的 blazor 应用程序 <myComp> 中重用，共享 Css 甚至创建完整的 Razor 视图，例如Area/MyAdmin/Pages/Page1.cshtml 并从我的 Blazor 应用程序调用https://MyApp/MyAdmin/Page1使用它，抱歉，我的问题是，如何像页面一样重用 FULL Blazor 组件？在我的 Razor 类库中添加一个文件夹 Pages 并在其中添加 Contact.razor ，它不会用作我的 Blazor 应用程序中的 < Contact > 但我将能够像https://MyApp/Contact一样调用？

有人可以给我一个例子吗？谢谢！

标签： blazorblazor-client-siderazor-class-library

解决方案

要在 Blazor 项目中显示来自 Razor 类库的页面，需要执行几个步骤：

  1. 创建类库（有模板）

  2. 向类库添加页面

  3. 将项目引用添加到您的 blazor 项目（右键单击依赖项...）

  4. 在 Blazor 项目中，将 Razor 组件库的程序集添加到 Router 组件（在本示例中，Razor 组件库的名称为 GeneralUi）。您可以通过设置 AdditionalAssemblies 参数来做到这一点：

       <Router AppAssembly="@typeof(Program).Assembly"
         AdditionalAssemblies="new[] { typeof(GeneralUi.About).Assembly}">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
     </Found>
     <NotFound>
         <LayoutView Layout="@typeof(MainLayout)">
             <p>Sorry, there's nothing at this address.</p>
         </LayoutView>
     </NotFound>
 </Router>

在这里，重要的是您只需从 Razor 组件库中获取一个页面（无论您使用哪个页面）。通过该步骤，您可以从 Razor 组件库路由到页面。

如果您只想使用组件（无页面），您可以放弃第 4 步。然后您只需将该组件包含在另一个组件中。如果您不想提供完整的命名空间，只需在 Blazor 项目的 _Imports.razor 文件中添加命名空间。

如果在 Razor 类库中定义了样式，则需要将这些样式（文件）添加到 Blazor 项目中。在 Blazor WebAssembly 中，您可以在 index.html 文件中执行此操作，只需添加：

<link href="_content/GeneralUi/css/styles.css" rel="stylesheet" />

_content是一个命名约定，需要告诉样式文件来自另一个程序集/项目。本例中样式文件styles.css来自GeneralUi项目，放在wwwroot文件夹下的css文件夹中（wwwroot文件夹中都是项目的静态资源）

推荐阅读