_Imports.razor

No artigo anterior abordamos o recurso de Layouts que temos no Blazor. E como foi dito no final do artigo, nós usamos um arquivo chamado _Imports.razor como uma forma para definir quais os componentes que vão utilizar o Layout.

Neste artigo vamos entender o objetivo de um arquivo _Imports.razor, e como utilizá-lo para economizar código em nosso projeto.

Os exemplos exibidos nesse artigo são baseados na aplicação de exemplo criada nesse artigo aqui com o Visual Studio 2019, e nesse outro aqui com o VSCode.

Solution Explorer

Se você observar os arquivos do projeto Blazor na Solution Explorer, encontrará originalmente dois arquivos com o nome _Imports.razor. Confira na Figura 1.

Figura 1: Arquivos _Imports.razor

Como você pode ver, temos um arquivo _Imports.razor na raiz do projeto, e outro dentro da pasta Pages.

Objetivo

O propósito de um arquivo Imports.razor em um projeto Blazor, é adicionar determinados recursos automaticamente em todos os componentes da mesma pasta, e das suas respectivas subpastas.

Então, na prática, todo o código que você encontrar nesses arquivos, será replicado no código dos componentes, no momento da compilação.

@using

Se você abrir o arquivo _Imports.razor que está na raiz do projeto, verá que nele temos várias diretivas @using, definindo os namespaces que todos os componentes do projeto terão acesso automaticamente. Veja na Figura 2.

Figura 2: Namespaces importados em todos os componentes do projeto

Como você pode ver, o _Imports.razor declara o uso de 7 namespaces. Esses namespaces serão importados em todos os componentes do projeto, pois o _Imports.razor está na raiz do projeto.

Para você comprovar isso abra o componente FetchData.razor, e como mostra a Figura 3, veja que nele é injetado o serviço HttpClient.

Figura 3: Uso da classe HttpClient do namespace System.Net.Http

A classe HttpClient faz parta do namespace System.Net.Http, que como você pode conferir, não foi importado diretamente no componente.

Nós só podemos usar o HttpClient em qualquer componente do projeto, sem precisar importá-lo, pois o namespace System.Net.Http foi importado no arquivo _Imports.razor.

@layout

Se você abrir o arquivo _Imports.razor que está dentro da pasta Pages, verá que nele nós temos apenas uma diretiva @layout. Veja a Figura 1.

Figura 1: Conteúdo do _Imports.razor da pasta Pages

Como você pode conferir no artigo de Layouts, a diretiva @layout serve para definir que um determinado componente será renderizado dentro do Layout informado na diretiva.

Quando a diretiva @layout é colocada em um arquivo _Imports.razor, todos os componentes que o arquivo _Imports.razor afetar, irão usar o Layout definido na diretiva.

Esse arquivo _Imports.razor da pasta Pages, serve apenas para os componentes que estão dentro desta pasta. Sendo assim, somente esses componentes serão renderizados usando o MainLayout.

Concluindo

Você pode usar outras diretivas nos arquivos _Imports.razor, como por exemplo a diretiva @inject. Mas veja que isso só fará sentido se você tiver que injetar o serviço em todos os componentes de uma determinada pasta.

E para concluir, você pode modificar o conteúdo dos arquivos _Imports.razor, para reaproveitar essas diretivas da forma que precisar.

Grande Abraço e até a próxima!

3 comentários em “_Imports.razor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s