Файл _Imports.razor и общие директивы компонентов

Последнее обновление: 30.11.2023

Проект может содержать множество компонентов, и различные компоненты могут применять ряд общих директив, например, подключать ряд общих пространств имен.

Например, в прошлой теме было два компонента - App.razor и Home.razor.

Компонент App.razor является корневым и устанавливает общую структуру веб-страницы:

@page "/"
@using Microsoft.AspNetCore.Components.Web

<!DOCTYPE html>
<html>
<head>
    <HeadOutlet />
    <meta charset="utf-8" />
</head>
<body>
    <Home />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

В данном случае в секции <head> применяется встроенный компонент HeadOutlet, но для его применения надо подключить пространство имен Microsoft.AspNetCore.Components.Web.

Во втором компоненте - Home.razor с помощью встроенных компонентов PageTitle и HeadContent устанавливаем метаданные страницы:

@using Microsoft.AspNetCore.Components.Web

<PageTitle>METANIT.COM</PageTitle>
<HeadContent>
    <meta name="description" content="Как устанавливать заголовок страницы в Blazor" />
    <meta name="updated_at" content="@DateTime.Now" />
</HeadContent>

<h2>Hello METANIT.COM</h2>

И для применения встроенных компонентов PageTitle и HeadContent опять же надо подключить пространство имен "Microsoft.AspNetCore.Components.Web", где эти компоненты содержатся.

Таким образом, мы дублируем в обоих компонентах поключение одного и того же пространства имен. И таких общих пространств имен может быть много. И компонентов, которые их подключают, тоже может быть много. Поэтому отдельное подключение пространств имен, да и вообще использование повторяющихся директив для компонентов нецелесообразно.

В этом случае мы можем определить в папке компонентов файл с именем _Imports.razor (который фактически тоже выступает как компонент) и определить в этом файлы все общие директивы компонентов, например, подключение общих пространств имен. А при создании приложения фреймворк blazor подхватит этот файл и добавит его директивы в другие компоненты.

Так, добавим в папку компонентов новый файл _Imports.razor

_Imports.razor в Blazor

Определим в этом файле следующий код:

@using Microsoft.AspNetCore.Components.Web

После этого мы можем убрать подключение данного пространства имен из остальных компонентов - App и Home. Например, код компонента App.razor после изменения:

@page "/"

<!DOCTYPE html>
<html>
<head>
    <HeadOutlet />
    <meta charset="utf-8" />
</head>
<body>
    <Home />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

И код компонента Home.razor:

<PageTitle>METANIT.COM</PageTitle>
<HeadContent>
    <meta name="description" content="Как устанавливать заголовок страницы в Blazor" />
    <meta name="updated_at" content="@DateTime.Now" />
</HeadContent>

<h2>Hello METANIT.COM</h2>

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850