分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 16:49:47

今天我们来学习布局组件。

布局也是一种Blazor组件，所以我们可以在布局组件里使用我们所有前面学习过的所有知识。但是对于整个应用来讲我们需要设定一个默认的布局，当您创建好实例代码之后，默认布局组件是被放置到Shared目录下，组件名称是MainLayout.razor, 同时我们注意到也定义了一个独立的CSS定义文件Mainlayout.razor.css,  同时我们主要是通过App.razor 组件来通过RouteView组件来使用布局组件, 如下图：

甚至你可以在App.razor组件中通过服务来进行布局切换，改变整个站点的布局和样式。

我们接下来理解一下布局组件的基本结构

布局组件

布局组件和其他的组件区别在于，其继承于LayoutComponentBase, 这个组件，该组件有一个属性Body,使用该属性来渲染使用布局组件的组件内容。如下是一个布局组件的定义实例：

您同时可以看到通过dotnet 创建一个实例代码之后会创建一个默认的MainLayout的布局组件:

那么该如何应用组件呢？

在整个App层面应用组件：

对于Blazor组件来说，我们整个App层面指定一个默认的Layout 通过RouteView组件就可以指定了，如下图：

• 通过在_Imports.razor中通过指令@layout 来指定布局组件。
• 可以为每一个目录单独设置一个布局组件，只需要在当前目录下创建文件_Imports.razor, 然后在该组件中使用@layout 指令指定布局组件，这样，该目录包括目录的子目录会全部应用新的布局组件。
• 在组件中直接使用指令@layout来指定组件。

需要注意的是，布局组件覆盖的。例如在组件中指定@layout会覆盖其他级别的指定，在目录中会覆盖整个App的默认设定。

对于任意内容使用模板

对于任意内容都可以使用模板，不过这个时候需要使用组件<LayoutView>, 如下图：

嵌套布局组件

我们可以使用嵌套的布局组件，这个就没啥了，直接看官方的代码就好了。