编写 Blazor 布局

Blazor 布局是特定类型的组件，因此编写 Blazor 布局与编写其他组件以在应用中呈现 UI 类似。 例如，以相同的方式使用 @code 块和很多指令。 布局在扩展名为 .razor 的文件中定义。 文件通常存储在应用的“Shared”文件夹中，但你可以选择将其存储在使用它的组件可访问的任何位置。

布局组件有两个独特的要求：

  • 必须继承 LayoutComponentBase 类。
  • 必须在要呈现发起引用的组件内容的位置包含 @Body 指令
@inherits LayoutComponentBase

<header>
	<h1>Blazing Pizza</h1>
</header>

<nav>
	<a href="Pizzas">Browse Pizzas</a>
	<a href="Toppings">Browse Extra Toppings</a>
	<a href="FavoritePizzas">Tell us your favorite</a>
	<a href="Orders">Track Your Order</a>
</nav>

@Body

<footer>
	@new MarkdownString(TrademarkMessage)
</footer>

@code {
	public string TrademarkMessage { get; set; } = "All content is &copy; Blazing Pizzas 2021";
}

备注

布局组件不包括 @page 指令，因为它们不直接处理请求，不应为它们创建路由。 引用组件使用 @page 指令。

如果从 Blazor 项目模板创建了 Blazor 应用，则该应用的默认布局为 Shared/MainLayout.razor 组件。

在 Blazor 组件中使用布局

若要使用另一个组件中的布局，请添加具有要应用布局名称的 @layout 指令。 组件的 HTML 将在 @Body 指令的位置呈现。

@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
	[Parameter]
	public string Favorite { get; set; }
}

此图说明了如何将组件和布局组合在一起来呈现最终的 HTML：

如果要将模板应用于文件夹中的所有 Blazor 组件，可以使用 _Imports.razor 文件作为快捷方式。 Blazor 编译器找到此文件时，会自动在文件夹中的所有组件中包含其指令。 使用此方法，无需再将 @layout 指令添加到每个组件，适用于 _Imports.razor 文件所在文件夹及其所有子文件夹中的组件。

重要

请勿向项目的根文件夹中的 _Imports.razor 文件添加 @layout 指令，因为这会导致布局的无限循环。

如果要将默认布局应用于 Web 应用的所有文件夹中的所有组件，可以在 App.razor 组件中执行此操作，可以像在第 2 单元中学到的那样，在该组件中配置 Router 组件。 在 <RouteView> 标记中，使用 DefaultLayout 属性。

<Router AppAssembly="@typeof(Program).Assembly">
	<Found Context="routeData">
		<RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazingPizzasMainLayout)" />
	</Found>
	<NotFound>
		<p>Sorry, there's nothing at this address.</p>
	</NotFound>
</Router>

在各自 @layout 指令或 _Imports.razor 文件中指定了布局的组件将覆盖此默认布局设置。