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

Question

我这里有问题，

我创建了一个核心 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一样调用？

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

Answer 1

要在 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文件夹下都是一个项目的静态资源）

Answer 2

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

例如。

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