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

Question

我这里有一个问题，

我创建了一个Blazor应用程序（服务器端），使用的是core 3.1，然后我创建了一个Razor类库（旧版本razorlib）。 通过这个类库，我可以创建Blazor组件并在我的Blazor应用程序中重用它们，例如 <myComp>，共享CSS，甚至可以创建完整的Razor视图，例如Area/MyAdmin/Pages/Page1.cshtml，并从我的Blazor应用程序中调用它们，如https://MyApp/MyAdmin/Page1。很抱歉介绍得有点长，我的问题是，如何像页面一样重用完整的Blazor组件？我在我的Razor类库中添加了一个文件夹Pages，在其中添加Contact.razor，它将不会被用作<Contact>在我的Blazor应用程序中使用，但我仍然能够像https://MyApp/Contact那样直接调用它吗？

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

- Douglas Simão

---

在您的 app.razor 文件中添加以下代码行 AdditionalAssemblies="new[] { typeof(Component1).Assembly }"，其中 Component1 来自您的 Razor 类库。另外，请不要忘记在您的 Blazor 应用程序的 _Import.razor 文件中添加您的类库项目名称空间 @using YourClasslibProject。 这里是一个示例项目：https://github.com/douglassimaodev/blazor - Douglas Simão

Answer 1

在Blazor项目中展示Razor类库的页面需要进行以下几步:

1. 创建一个类库（模板已经存在）

2. 向类库中添加页面

3. 将类库项目引用添加到Blazor项目中（右键单击依赖项...）

4. 在Blazor项目中，将Razor组件库的程序集添加到路由器组件中（在此示例中，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 文件夹中包含项目的所有静态资源）。

- troYman

---

AdditionalAssemblies 属性是我所缺少的。谢谢。 - Brad

Answer 2

• 创建RazorClasslibrary项目并将Component1作为您的Razor页面，使用输出类型（默认）类库构建项目
• 将创建单个dll，请记住命名空间
• 通过选择dll作为程序集添加引用到您的新Blazor项目或通过选择.csproj添加为项目
• 不是必需的，但请构建新的Blazor项目，并在任何页面中开始添加您的组件。
• 您可以使用完全限定的命名空间或在新的/contact页面中导入并删除其他不需要的代码

例如：

@page "/contact"
<RazorClassLibrary.Component1></RazorClassLibrary.Component1>
@code { ... }

- SJ 0