Parâmetros nos Componentes Blazor

Vou dedicar esse artigo aos Parâmetros dos Componentes Blazor. Se você ainda não conhece como os Componentes funcionam no Blazor, sugiro que leia esse artigo aqui.

Declarando um Parâmetro

Podemos passar parâmetros para um componente Blazor, como uma forma de se comunicar com ele. Isso é possível declarando parâmetros no componente.

Podemos ter quantos parâmetros forem necessários. Em nossa aplicação de exemplo, vamos editar o componente Counter, para incluir o parâmetro Quantidade.

Veja na Figura 1 que um Parâmetro nada mais é do que uma propriedade C#, decorada com o atributo [Parameter].

Figura 1: Declarando Parâmetro no componente

Nesse exemplo estamos usando o parâmetro Quantidade no incremento do contador. Sendo assim, o contador será incrementado na quantidade passada como parâmetro.

Ainda podemos utilizar o componente sem passar nenhum parâmetro, e se isso acontecer, o _currentCounter será incrementado em 1, que é o valor padrão da propriedade Quantidade.

Passagem de Parâmetro

A passagem de parâmetro é feita através de atributos da tag HTML que representa o componente. Ou seja, todo componente é potencialmente uma tag HTML em nossa aplicação, e todo parâmetro de um componente é um atributo dessa tag.

Veja na Figura 2 como passamos um valor para o parâmetro Quantidade do componente Counter. Esse código é do Componente Index, onde estamos usando o Counter.

Figura 2: Passando parâmetro para o componente

Nesse exemplo estamos passando o valor 5 para o parâmetro Quantidade. Se você executar a aplicação verá que na página Index, o Contador será incrementado de 5 em 5. E se você for na página Counter, ele continua incrementando de 1 em 1.

Figura 3: Exemplo de Componente executando com Passagem de Parâmetro

Combinando Parâmetros e Rotas

Como já vimos no artigo sobre Rotas, podemos passar parâmetros através das rotas também. E nada impede que o mesmo parâmetro possa ser alimentado pelo atributo HTML ou pela Rota.

Veja na Figura 4 que basta declararmos o parâmetro na Rota, que ele poderá ser alimentado das duas formas.

Figura 4: Combinando Parâmetro de Rota com Parâmetro HTML

Concluindo

Existe uma forma mais avançada de passagem de parâmetros no Blazor, chamada de ChildContent, que veremos num próximo artigo.

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

Publicidade