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.
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.
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.
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.
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!
Blaze of Code 
3 comentários em “_Imports.razor”