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

Blazor-Razor类库-重用完整Blazor页面,blazor,blazor-client-side,razor-class-library,Blazor,Blazor Client Side,Razor Class Library,我这里有个问题 我用core 3.1创建了Blazor应用程序(服务器端),然后创建了Razor类库(旧razorlib) 有了这个类库,我可以创建blazor comp并在我的blazor应用程序中重用,共享Css甚至可以创建完整的Razor视图,如Area/MyAdmin/Pages/Page1.cshtml,并在我的blazor应用程序调用中使用它,很抱歉这么大的介绍,我的问题是,如何像页面一样重用完整的blazor componemt?在我的Razor类库a文件夹页面中添加Contact

我这里有个问题

我用core 3.1创建了Blazor应用程序(服务器端),然后创建了Razor类库(旧razorlib) 有了这个类库,我可以创建blazor comp并在我的blazor应用程序中重用,共享Css甚至可以创建完整的Razor视图,如Area/MyAdmin/Pages/Page1.cshtml,并在我的blazor应用程序调用中使用它,很抱歉这么大的介绍,我的问题是,如何像页面一样重用完整的blazor componemt?在我的Razor类库a文件夹页面中添加Contact.Razor,它将不会用作Blazor应用程序中的,但我可以像这样调用

有人能给我举个例子吗?谢谢

  • 创建RazorClasslibrary项目后,使用Component1作为Razor页面,使用输出类型:(默认)类库构建项目
  • 将创建单个dll,请记住名称空间
  • 通过选择dll将对新Blazor项目的引用添加为汇编,或者通过选择.csproj将其添加为项目
  • 不需要,但是构建新的Blazor项目,并在任何页面中开始添加组件
  • 您可以使用完全限定的命名空间,也可以在“新建/联系人”页面中导入,以删除其他不需要的代码
例如

@page”/contact
@代码{…}

要在Blazor项目中显示Razor类库中的页面,需要执行以下几个步骤:

  • 创建类库(存在模板)

  • 向类库中添加页面

  • 将项目引用添加到blazor项目(右键单击dependencies…)

  • 在Blazor项目中,将Razor组件库的程序集添加到路由器组件(在本例中,Razor组件库的名称为GeneralUi)。您可以通过设置AdditionalAssemblys参数来实现这一点:

       <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" />
    
    
    

    \u内容是一种命名约定,需要告知样式文件来自另一个部件/项目。在本例中,样式文件styles.css来自GeneralUi项目,它位于wwwroot文件夹下的css文件夹中(wwwroot文件夹中的所有项目都是静态资产)

    [Resolved]在您的应用程序中。razor添加此行AdditionalAssemblys=“new[]{typeof(Component1.Assembly}”当Component1来自Razor类库时,也不要忘记从Blazor应用程序中添加_Inport.Razor使用ClassLibProject在classlib项目名称空间@中添加我的项目示例:AdditionalAssemblys属性是我缺少的。谢谢
    <link href="_content/GeneralUi/css/styles.css" rel="stylesheet" />