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 esseartigo 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.