Referências de Componentes no Blazor

Neste artigo iremos explorar o recurso de Referências de Componentes que temos no Blazor. Os exemplos exibidos nesse artigo são baseados na aplicação de exemplo criada nesse artigo aqui com o Visual Studio, e nesse outro aqui com o VSCode.

ref

Uma forma de se comunicar com componentes é através de referências criadas no seu código C#.

Uma referência é basicamente um atributo declarado no componente, que deve ter o mesmo nome usado no atributo HTML ref, que deve ser colocado na tag do componente.

Confira na Figura 1 um exemplo de como criar uma referência à um Componente. Nesse exemplo estamos criando uma referência ao componente TesteRef.razor.

Figura 1: Declarando e usando uma referência de componente

Usando uma referência

Na Figura 1 você pode ver que o atributo declarado para a referência, precisa ser do mesmo tipo do componente declarado no HTML.

Com isso, através dessa referência, temos acesso à todos os elementos públicos do componente. No próprio exemplo da Figura 1, estamos usando a referência para chamar o método ExibirMensagem do componente TesteRef.

Veja na Figura 2 o código do componente TesteRef, incluindo o seu método ExibirMensagem.

Figura 2: Componente TesteRef

O método ExibirMensagem do componente TestRef, simplesmente recebe uma string e atribuí o seu valor à propriedade Mensagem, que será exibida no HTML do componente.

Atenção! Até a versão atual do Blazor (preview 5), para que o Componente seja atualizado na chamada do método pela sua referência, foi necessário chamar o método StateHasChanged do componente, para forçar uma atualização da sua interface.

Testando

Execute o exemplo e veja, como mostra a Figura 3, que podemos chamar um método de um componente através de sua referência.

Figura 3: Testando referência de componente

Grande Abraço e até o próximo!

Um comentário em “Referências de Componentes no Blazor

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