E aí galera! Tudo certo?
Hoje vamos falar novamente sobre o Blazor, dessa vez o post é rapidinho e vamos falar sobre injeção de dependência! Bora!
Caso você ainda esteja um pouco perdido e não saiba o que é o Blazor, sugiro que você veja esse post aqui.
Injeção de dependência
Se você ainda nunca ouviu falar sobre isso, vou dar um breve resumo: injeção de dependência é uma técnica utilizada para manter o baixo acoplamento entre objetos. Fazendo com que os objetos dependam apenas de abstrações (Interfaces por exemplo) e não de objetos de “baixo nível”.
Injeção de dependência no Blazor
No Blazor, o mecanismo de injeção de dependência é baseado na interface System.IServiceProvider do .NET.
Como utilizar?
Para utilizar a injeção de dependência no Blazor, precisamos configurar quais serviços vamos utilizar no método Main, dentro de Program.cs. E depois injetala utilizando a diretiva @inject. Para exemplificar, vamos fazer uma classe que gera números aleatórios e injetá-la em um componente.
Criei uma pasta chamada “Services“, e dentro dela a classe “GeradorDeNumeros” que tem o seguinte código:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using System; | |
| namespace BlazorExample.Services | |
| { | |
| public class GeradorDeNumeros | |
| { | |
| public int GerarNumero(int numeroInicial, int numeroFinal) | |
| { | |
| var random = new Random(); | |
| return random.Next(numeroInicial, numeroFinal); | |
| } | |
| } | |
| } |
Logo após, inseri no arquivo “_ViewImports.cshtml” a seguinte linha de código, que serve para “registrar” o namespace da minha classe, para poder utilizá-la sem precisar colocar o nome inteiro toda vez:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @using BlazorExample.Services |
E então, registrei o serviço dentro do método “Main” na classe “Program” da seguinte maneira:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| static void Main(string[] args) | |
| { | |
| var serviceProvider = new BrowserServiceProvider(configure => | |
| { | |
| configure.Add(ServiceDescriptor.Singleton(new GeradorDeNumeros())); | |
| }); | |
| new BrowserRenderer(serviceProvider).AddComponent<App>("app"); | |
| } |
Nesse exemplo, estamos instanciando a classe como um Singleton, que manterá apenas uma instância dessa classe. Fiz dessa maneira por fins didáticos, só para o exemplo; o tipo utilizado depende de cada situação que temos em nossas aplicações.
Por fim, vamos fazer o componente que vai utilizar a nossa classe, ele ficou escrito dessa maneira:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @page "/gerar-numero" | |
| @inject GeradorDeNumeros GeraNumeros | |
| <h1>Gerador de números aleatórios</h1> | |
| <h3>O numero gerado foi @numero</h3> | |
| @functions { | |
| int numero; | |
| protected override async Task OnInitAsync() | |
| { | |
| numero = GeraNumeros.GerarNumero(1, 1000); | |
| } | |
| } |
Vamos reparar em algumas coisas:
-
- A diretiva @inject na linha 2 faz com que utilizemos a instância da classe “GeradorDeNumeros” que vai pra variável “GeraNumeros“;
- Se não tivéssemos colocado a referência da classe no arquivo “_ViewImports.cshtml” teríamos que colocar o namespace também, e o código ficaria assim:
-
@inject Services.GeradorDeNumeros GeraNumeros
-
- A chamada do método está na linha 14, onde preenchemos a variável “numero” com o retorno.
O resultado final é esse:
Tranquilo de mais né galera?
Fiquem ligados por aqui que logo logo vamos fazer uma todo list para exercitar!
Os exemplos de código estão disponíveis no GitHub: https://github.com/vmussak/blazor-examples
Referências
O post foi inspirado por esse conteúdo aqui:
Por hoje é só, qualquer dúvida ou sugestão, estou à disposição! Até mais 😀
Vinícius Mussak 
One thought on “Injeção de dependência com Blazor”